如何用Angular CLI替换SCSS文件？

Question

Angular CLI提供了在构建项目时替换文件的可能性。我想使用此功能将默认样式的SCSS文件替换为包含客户特定CSS的SCSS文件。

但是Angular CLI似乎不能替换SCSS文件。我怎样才能做到这一点？

---

我尝试过的

environment.default.ts

export const environment = {
  name: 'default'
};

环境特殊

export const environment = {
  name: 'special'
};

默认/_scss-config.scss

@debug ('default'); // gets called but should never be called

特殊的/_scss-config.scss

@debug ('special'); // never gets called

angular.json（仅相关部分）

  "architect": {
    "build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.default.ts",
            "with": "src/environments/environment.special.ts"
          },
          {
            "replace": "src/scss/default/_scss-config.scss",
            "with": "src/scss/special/_scss-config.scss"
          }
        ],
        "stylePreprocessorOptions": {
          "includePaths": [
            "src/scss/default"
          ]
        }
      }
    }
  }

主要

import { environment } from './environments/environment.default';

console.log(environment.name); // 'special' --> replacement works!

---

结果：可以用
文件替换.ts文件，但不能用.scss文件替换，因为永远不会调用特殊的调试语句，但是默认情况下，即使文件已经被重新放置，它也不会被调用。

Answer 1

Angular.io指出：

CLI的主要配置文件angular.json可让您用该文件的目标特定版本替换任何文件。

这实际上是愿景，但是根据此GitHub线程，目前还不正确。
看来，到目前为止，只有.ts和.html文件都支持。

因此，当前问题的答案是“否”，尚无法替换SCSS文件。

但是有一个解决方法：
可以使用不同的配置angular.json来实现相同的目标-替换SCSS文件。

文件夹结构：

src/
    scss/
        default/
            _scss-config.scss
        special/
             _scss-config.scss

src / scss / default / scss-config.scss

body { background-color: blue; }

src / scss / special / scss-config.scss

body { background-color: red; }

angular.json

<!-- language: lang-json -->

{
  [...]
  "architect": {
    "build": {
      "options": {
        "stylePreprocessorOptions": {
          "includePaths": [
            "src/scss/default"
          ]
        }
      },
      "configurations": {
        "default": {
          "stylePreprocessorOptions": {
            "includePaths": [
              "src/scss/default/"
            ]
          }
        },
        "special": {
          "stylePreprocessorOptions": {
            "includePaths": [
              "src/scss/special/"
            ]
          }
        }
      }      
    },
    "serve": {
      "configurations": {
        "default": {
          "browserTarget": "angular-scss-replacement:build:default"
        },
        "special": {
          "browserTarget": "angular-scss-replacement:build:special"
        }
      }
    }     
    [...]      
  }
}

style.scss或component.scss

@import 'scss-config';

/* use your SCSS variables and stuff as you normally would */

请注意，您不得_在import语句中包含文件名中的（下划线）
（有关更多详细信息，请参阅Partials部分）

如何使用它：

// 'ng serve'-command uses default configuration as defined in angular.json > build 
ng serve

// default config creates blue background
ng serve --configuration=default


// specail config create red background
ng serve -c=special

（此解决方案来自上述线程-thx到richardtreier）

这种方法的缺点：

• 它迫使您使用特定的文件夹结构来分隔不同的SCSS配置
• 这可能会迫使您将这些文件夹移出常规文件夹结构。
  例如，"includePaths": ["src/scss"]由于SCSS配置无法单独加载，因此不适用于上述文件夹结构。