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

Question

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

它在运行 ng serve --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 已经修改了文件系统。

---

更新

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

Answer 1

您还需要更新 @angular-devkit/build-angular 才能正常工作:

ng update @angular-devkit/build-angular