CSS 更新后 NPM 模块无法导入

Posted 2023-02-19

【中文标题】CSS 更新后 NPM 模块无法导入

【英文标题】：NPM module is not able to import after CSS updates

【发布时间】：2021-12-10 12:33:55

【问题描述】：

我必须对我制作的 NPM 模块进行 CSS 更改。 但是，在进行了一些更改后，在确定 NPM 模块已安装后，我无法解析它。我没有对模块中的 index.js 进行任何更改，也没有看到是什么突然破坏了它。

 Can't resolve 'gatsby-ui-components' in '/Users/spacemonky/Code/sad-store/src/layouts'

导入 layout.js：

import  ReponsiveLogoNavBar  from 'gatsby-ui-components'

gatsby-ui-components 中的 index.js：

/*
  Export with named export to be able to pull in from library
*/

export  ReponsiveLogoNavBar  from './components/Navigation/ReponsiveLogoNavBar'
export  HeroSection  from './components/Sections/HeroSection'
export  SlantedSections  from './components/Sections/SlantedSections'
export  CallToAction  from './components/Sections/CallToAction'
export  BasicSitemapFooter  from './components/Footers/BasicSitemapFooter'
export  CurvedSection  from './components/Sections/CurvedSection'
export  FixedNavWrapper  from './components/Wrappers/FixedNavWrapper'

我的 package.json：

  "name": "gatsby-ui-components",
  "version": "0.0.20",
  "description": "Gatsby components for website ui",
  "main": "index.js",
  "scripts": 
    "build": "babel src --out-dir dist --ignore **/__tests__ && cp -r src/css dist && cp README.md dist && cp package.json dist",
    "storybook": "start-storybook",
    "webpack": "webpack",
    "start": "webpack-dev-server"
  ,
  "keywords": [
    "gatsby",
    "components",
    "react",
    "ui",
    "design"
  ],
  "repository": 
    "type": "git",
    "url": "https://github.com/stcalica/gatsby-components.git"
  ,
  "author": "Kyle Calica",
  "license": "ISC",
  "devDependencies": 
    "@babel/cli": "^7.7.5",
    "@babel/core": "^7.7.5",
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/preset-env": "^7.7.6",
    "@babel/preset-react": "^7.7.4",
    "@storybook/addon-actions": "^5.2.8",
    "@storybook/react": "^5.2.8",
    "babel-core": "^7.0.0-bridge.0",
    "babel-loader": "^8.0.6",
    "babel-plugin-remove-graphql-queries": "^2.7.19",
    "babel-preset-gatsby-package": "^0.2.12",
    "css-loader": "^3.3.0",
    "gatsby": "^2.18.10",
    "html-webpack-plugin": "^3.2.0",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "style-loader": "^1.0.1",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10"
  ,
  "dependencies": 

【参考方案1】：

我发现了问题。我的 NPM 模块中的 package.json 本身指向 index.js。它应该指向 src/index.js

  "main": "src/index.js",