webpack - 使用带有 sass-loader 的别名来避免相对路径混乱

Question

我有一个.scss使用背景图像 ( 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)