Search code examples
webpackwebpack-2sass-loaderwebpack-file-loader

Using aliases with sass-loader to avoid relative path mess

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?

Solution

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