Npm包中如何在CSS中包含图片

Question

我有一个npm包，其结构如下：

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

style.scss文件像这样引用图片：

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

问题在于当我使用这个包的时候，CSS文件查找图片是从根目录开始而不是相对于我的包来查找，我们如何解决这个问题？

这是我导入该包的方式：

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

- ng2user

---

你应该保持相对路径，考虑已编译的 CSS 文件而不是 SCSS 文件。你把编译后的 CSS 放在哪里？（如果它在同一个文件夹中，即 styles，那么只提到 image.png） - Mr_Green

我正在将 SCSS 文件导入到我的项目中 - @import "mypackage/src/styles/style" - ng2user

你在哪里编译这个scss文件？ - Mr_Green

在我的项目中，我正在使用这个包。 - ng2user

我不是在问那个，我是在问你在问题中展示的确切位置。无论如何，我的第一个评论应该有助于理解。 - Mr_Green

Answer 1

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

您还可以参考以下问题(Include assets from webpack bundled npm package)。

- aimuke

Answer 2

最近我遇到了这个问题，而StackOverflow上的信息已经过时了（正如预期的那样，这是一个与NPM和Web开发相关的问题，在这个领域一切都在快速发展）。

从根本上讲，这个问题完全可以通过Webpack 5来解决，因为它自带了解决方案。只需要更新webpack.config.js 文件即可。

关于这个问题，Webpack文档中的部分内容在这里：https://webpack.js.org/guides/asset-modules/

你需要做的就是将静态资源进行Base64编码并将其嵌入到CSS/JavaScript中。

实际上，在你整理源代码以在NPM上发布时，如果你有一些CSS文件引用了静态图片，比如：background-image: url(./image.png)，你需要将你的资源嵌入到样式文件中，然后使用 style-loader 和 css-loader 库来处理你的样式文件。

简而言之，将以下行添加到我的webpack.config.js中解决了我的问题，并允许我导出一个单独的index.js文件与我的包一起使用，我可以将其导入到其他项目中。

这里真正重要的是当我们测试图片时的type: asset/inline行。

webpack.config.js
...
...

module: {
    rules: [
        {
          test: /\.(js|jsx)$/,
          exclude: /node_modules/,
          use: ["babel-loader"],
        },
        {
          test: /\.css$/i,
          use: ["style-loader", "css-loader"],
        },
        {
          test: /\.(png|jpg|gif)$/i,
          type: "asset/inline",
        },
      ],
    },
 
...
...

- Oguz Tecirlioglu

Answer 3

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

npm install file-loader --save-dev

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

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

- Angga Ginanjar