npm 包在 CSS 中包含图像答案

【问题标题】：Npm package include images in CSSnpm 包在 CSS 中包含图像
【发布时间】：2017-08-28 00:40:17
【问题描述】：

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

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

style.scss 文件引用如下图像：

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

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

这就是我导入包的方式：

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

【问题讨论】：

您应该保留相对路径，考虑编译后的 css 文件而不是 scss 文件。你在哪里保存编译的css？（如果它在同一文件夹中，即styles，则仅提及image.png）
我在我的项目中导入 scss 文件 - @import "mypackage/src/styles/style"
你在哪里编译这个 scss 文件？
在我的项目中，我正在使用包。
我不是在问那个，我是在问你在问题中显示的确切位置。无论如何，我的第一条评论应该有助于理解。

【解决方案1】：

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

【讨论】：

【解决方案2】：

你只需要像这样安装文件加载器。

npm install file-loader --save-dev

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

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

【讨论】：