Npm package 包括 CSS 中的图像

Question

I have an npm package with this structure:

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

The style.scss file is referencing the image like this:

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

The problem is when I consume the package, CSS is looking the image from the root and not relative to my package, how we can solve this issue?

This is how I'm importing the package:

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

Answer 1

I have this issue too and I do not find a elegant way to this issue. Finally I copied the referenced files to the build directory to solve this issue. The "copy-webpack-plugn" plugin was used( https://github.com/kevlened/copy-webpack-plugin )

You may refer to the following issue too( Include assets from webpack bundled npm package )

Answer 2

All you need just install file loader like this.

npm install file-loader --save-dev

and then add this line to module part in your config :

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

Answer 3

I have had this issue recently and the information on StackOverflow was outdated (as expected, this is a question that relates to NPM & Web Development and everything moves fast in this space).

Fundamentally, this problem is solved entirely by Webpack 5 as it comes out of the box. Only the webpack.config.js file needs to be updated.

The part of webpack's documentation that relates to this is here: https://webpack.js.org/guides/asset-modules/

What you want to do is Base64 encode your static assets and inline them to your CSS/JavaScript.

Essentially, when you are packing up your source code to distribute it on NPM, and you have some CSS file which refers to static images as such: background-image: url(./image.png) what you need to do is inline your assets to your style file, and then process your style file with the style-loader and css-loader packages.

In short, making my webpack.config.js contain the lines below solved my issue and allowed me to export one single index.js file with my package, which I imported into my other projects.

What really matters here is the type: asset/inline line, when we are testing for images.

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",
        },
      ],
    },
 
...
...