Npm包中包含CSS中的图像

Question

我有一个带有这种结构的npm包：

--src
  --styles
     -image.png
     -style.scss

style.scss文件正在引用这样的图像：

.test {
   background-image: url(./image.png);
}

问题是当我使用包时，CSS正在从根查找图像而不是相对于我的包，我们如何解决这个问题？

这就是我导入软件包的方式：

@import "mypackage/src/styles/style";

Answer 1

我也有这个问题，我找不到一个优雅的方法来解决这个问题。最后，我将引用的文件复制到构建目录以解决此问题。使用了“copy-webpack-plugn”插件（https://github.com/kevlened/copy-webpack-plugin）

您也可以参考以下问题（ Include assets from webpack bundled npm package）

Answer 2

您所需要的只是安装像这样的文件加载器。

npm install file-loader --save-dev

，然后将此行添加到配置中的模块部分：

module: {
        rules: [{
                 test: /\.(png|svg|jpg|gif)$/,
                 use: ['file-loader']
               }]
        }