I have a .scss file in which I'm using a backgorund image (background-image: url('../../../image.png')). The file-loader webpack plugin detects that image and copies it when I'm building my app, which is great.
The problem is that I have quite some images and quite some .scss files, and I have a huge mess going in my code with all the relative imports.
Is there a way I can tell either file-loader or sass-loader that if I do background-image: url('@alias/image.png') I'm referring to the folder where image.png is?
Webpack already supports this https://github.com/webpack-contrib/css-loader#alias
you just need to set-up the alias in css-loader’s options and reference the image as url(~alias/image.png)