Angular 根据环境动态交换 SASS 样式

我将 Angular 6 与新的 angular.json 文件一起使用，我在其中配置了单独的配置。在这个新配置中，我将 Constants.scss 替换为 Constants.newconfig.scss。

运行 ngserve --configuration=newconfig 时它可以正确编译，但由于某种原因它仍然使用原始的constants.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 已经修改了文件系统。

Update

• 我的constants.scss是在我的根styles.scss的顶部导入的
• 如果我使用上述方法交换特定组件 sass 文件，它似乎使用正确的替换 sass 文件。所以我不确定 webpack 和 Angular 编译器是否以不同的顺序处理组件特定的样式表

你需要更新@angular-devkit/build-angular以及它的工作：

ng update @angular-devkit/build-angular