角度根据环境动态交换 SASS 样式

Question

我正在使用Angular 6和新的angular.json文件，我已经在其中配置了一个单独的配置。在这个新配置中，我将我的constants.scss换成constants.newconfig.scss。

它在运行 ng serve --configuration=newconfig 时编译正确，但由于某种原因它仍然使用原始的常量.scss。

这是 angular.json 中生产的默认配置

"configurations": {
"production": {
...
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
]
...

这是我添加的内容。

"configurations": {
"production": { ...Prod stuff... },
"newconfig": {
...
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.newconfig.ts"
},
{
"replace": "src/constants.scss",
"with": "src/constants.newconfig.scss"
}
]
...

这是否与 webpack 如何预编译 sass 有关，所以当 Angular 替换常量文件时，webpack 已经修改了文件系统。

---

更新

我的常量.scss

• 被导入到我的根样式.scss的顶部
• 如果我使用上述方法交换特定的组件 sass 文件，它似乎使用了正确的替换 sass 文件。所以我不确定 webpack 和 angular 编译器是否以不同的顺序为特定于组件的样式表做事

Answer 1

你也需要 udpate@angular-devkit/build-angular让它工作：

ng update @angular-devkit/build-angular