Npm package include images in 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";

You should keep the relative path considering the compiled css file but not the scss file. where are you keeping the compiled css? (_if it is in the same folder i.e `styles` then mention only `image.png`_) — Mr_Green, Apr 03 '17 at 08:18
I am importing the scss file in my project - @import "mypackage/src/styles/style" — ng2user, Apr 03 '17 at 08:19
I am not asking that, I am asking for exact location as you have shown in your question. Anyway, my first comment should be helpful to understand. — Mr_Green, Apr 03 '17 at 08:23

score 3 · Answer 1 · edited May 23 '17 at 11:54

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

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

edited May 23 '17 at 11:54

Community

1
1

answered Apr 10 '17 at 09:17

aimuke

31
1

score 1 · Answer 2 · edited Aug 19 '22 at 13:17

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

score 0 · Answer 3 · answered May 13 '20 at 06:04

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

Npm package include images in CSS

3 Answers3

Linked