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)?