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

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)