在sass-loader中使用别名可以避免相对路径混乱

Question

我有一个.scss文件，我正在使用backgorund图像（background-image: url('../../../image.png')）。 file-loader webpack插件检测到该图像并在我构建应用程序时复制它，这很棒。

问题在于我有一些图像和一些.scss个文件，而且我的代码中包含所有相对导入的内容非常混乱。

我有没有办法告诉file-loader或sass-loader如果我background-image: url('@alias/image.png')我指的是image.png所在的文件夹？

Answer 1

Webpack已经支持此https://github.com/webpack-contrib/css-loader#alias

您只需在css-loader的选项中设置别名，并将图片引用为url(~alias/image.png)