Webpack不解析导入的CSS文件中的相对路径

Question

我目前正致力于构建一组UI模块，开发人员可以使用这些模块在其网站上创建内容（类似于Bootstrap，Foundation等）。每个UI模块都创建为自己的npm包，开发人员将通过npm将所需的模块提取到他们的项目中。

我有一个组件 - 手风琴包，其中只包含手风琴的CSS。它的文件结构如下：

/lib
/build
/node_modules
index.css
package.json

上面显示的 index.css 文件包含一个lib目录的相对链接，其中组件的实际样式是实时的：

./lib/accordion.css

我一直在用React Accordion项目测试这个包，并为样式导入了它。但是，Webpack似乎无法正确解析此程序包中的相对路径。

import "components-accordion";

给出错误：

无法编译。 ./src/components/Accordion.js 未找到模块：无法解析组件 - 手风琴＆＃39;在......

如果我直接链接到index.css文件：

import "components-accordion/index.css";

../部件-手风琴/ index.css 未找到模块：无法解析＆＃39; ./ lib / accordion＆＃39;在...

任何想法都会很棒。

由于

Answer 1

使用lib

更新您的webpack配置，将path文件夹作为webpack模块的一部分包含在内

const path = require("path");
resolve: {
    modules: [
      'node_modules',
      path.resolve(__dirname, 'lib')
    ]
  },