使用别名与sass加载程序，以避免相对路径混乱

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)