javascript - Npm package include images in CSS - Stack Overflow

admin管理员组

文章数量:1302352

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";

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";

• javascript
• css
• node.js
• npm

Share Follow edited Apr 3, 2017 at 8:20 ng2user asked Apr 3, 2017 at 8:16 ng2userng2user 2,08766 gold badges2525 silver badges3131 bronze badges 5

• You should keep the relative path considering the piled css file but not the scss file. where are you keeping the piled css? (if it is in the same folder i.e styles then mention only image.png) – Mr_Green Commented Apr 3, 2017 at 8:18
• I am importing the scss file in my project - @import "mypackage/src/styles/style" – ng2user Commented Apr 3, 2017 at 8:19
• Where are you piling this scss file? – Mr_Green Commented Apr 3, 2017 at 8:20
• In my project, where I am consuming the package. – ng2user Commented Apr 3, 2017 at 8:21
• I am not asking that, I am asking for exact location as you have shown in your question. Anyway, my first ment should be helpful to understand. – Mr_Green Commented Apr 3, 2017 at 8:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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./kevlened/copy-webpack-plugin)

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

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

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']
               }]
        }

本文标签： javascriptNpm package include images in CSSStack Overflow