SCSS - usage of image files with relative path are not working

Viewed 1196

I have the following 4 files:

/src/images/image.png
/src/scss/main.scss
/src/scss/test/test.scss
/src/js/entry.js

In main.scss I have the following code:

 @import './test/test.scss';

In 'test.scss' I have the following code:

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

And in 'entry.js' I have the following code:

 import './../scss/main.scss'

When I try to build this project with webpack, I get an error, that the image.png file can not be resolved. It appears, that when I build this project, test.scss thinks that it's relative folder is /src/scss/. If I change ../../images/image.png to ../images/image.png everything works correctly.

Is there any way to tell webpack or sass-loader to threat every imported file, as a separate file, and always use paths relative to the currently opened file? Or is there any way to specify paths from the root folder of my application (/src in this case)?

0 Answers
Related