在 sass-loader 中使用别名以避免相对路径混乱
Using aliases with sass-loader to avoid relative path mess
我有一个 .scss 文件，我在其中使用背景图片 (background-image: url('../../../image.png'))。 file-loader webpack 插件检测到该图像并在我构建我的应用程序时复制它，这很棒。
问题是我有相当多的图像和相当多的 .scss 文件，而且我的代码中包含所有相关导入，一团糟。
有没有办法告诉 file-loader 或 sass-loader 如果我这样做 background-image: url('@alias/image.png') 我指的是 image.png 所在的文件夹？
Webpack 已经支持这个https://github.com/webpack-contrib/css-loader#alias
你只需要在 css-loader 的选项中设置别名并将图像引用为 url(~alias/image.png)
我有一个 .scss 文件，我在其中使用背景图片 (background-image: url('../../../image.png'))。 file-loader webpack 插件检测到该图像并在我构建我的应用程序时复制它，这很棒。
问题是我有相当多的图像和相当多的 .scss 文件，而且我的代码中包含所有相关导入，一团糟。
有没有办法告诉 file-loader 或 sass-loader 如果我这样做 background-image: url('@alias/image.png') 我指的是 image.png 所在的文件夹？
Webpack 已经支持这个https://github.com/webpack-contrib/css-loader#alias
你只需要在 css-loader 的选项中设置别名并将图像引用为 url(~alias/image.png)