Webpack在加载/解析时动态替换scss中的url答案

【问题标题】：Webpack dynamically replace url in scss while loading/ResolvingWebpack在加载/解析时动态替换scss中的url
【发布时间】：2018-06-12 23:57:47
【问题描述】：

我目前正在使用 Webpack 开发一个 Angular 4 项目。

我希望能够自定义我的应用主颜色。

我所有的组件 SCSS 文件都会导入一个名为 color.scss 的文件，其中包含颜色变量。

@import "src/assets/sass/color";

我有两个文件：

我想告诉 webpack 在解析时替换这个 url，这取决于我传递的参数。

因此，当我执行时：

webpack-dev-server --env.custom=A

Webpack 会将 color.scss 的所有导入更改为“src/custom/A/assets/sass/color”。

有可能吗？如果是，如何实现？

【问题讨论】：

你能在 @import "src/custom/A/assets/sass/color"; 里面 src/assets/sass/_color.scss 然后重建吗？
是的，但我看不出这有什么帮助。自定义文件中定义的变量被主文件中定义的变量覆盖。
将导入移到底部（或者是顶部？）
自定义css是否有变量或css规则？
默认和自定义 SCSS 具有相同的结构（变量集）。只有他们的价值观会改变。在底部移动导入时，它可以工作。我的应用程序具有自定义颜色。但是，我怎样才能告诉 webpack 在 "src/assets/sass/color.scss" 的底部添加导入？

【解决方案1】：

src/assets/sass/_color.scss底部

添加@import "src/custom/A/assets/sass/color";

然后将A 更改为您要交换颜色的时间。

【讨论】：