如何用 Angular CLI 替换 SCSS 文件？

Question

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

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

---

我尝试过的：

environment.default.ts

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

environment.special.ts

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

default/_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"
          ]
        }
      }
    }
  }

ma​​in.ts

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

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

---

结果：
.ts 文件的文件替换有效，但不适用于 .scss 文件，因为永远不会调用特殊的调试语句，但默认情况下会调用，即使文件也应该被替换。

Answer 1

Angular.io 声明：

主 CLI 配置文件 angular.json [...] 允许您将 任何文件 替换为该文件的目标特定版本。

这实际上是愿景，但根据this GitHub thread，目前还不是这样。
到目前为止，似乎只支持.ts和.html文件。

因此，目前该问题的答案是否定的，尚无法替换 SCSS 文件。

---

2021 年 1 月更新： 仍然不起作用。使用 Angular 11.0.9 测试。

TLDR：

• 如果您尝试使用文件替换功能，Angular 11.x 现在会在不支持的文件类型上出错
  （下面描述的解决方法仍然有效，因为它不使用文件替换功能）

• 它仅支持以下类型的文件替换：.cjs、.js、.json、.mjs 和 .ts

背景：
似乎支持所有文件类型的文档中的初始声明是错误的。 Angular 11 引入了一项检查，以检查不受支持的文件类型的错误。

fix(@angular-devkit/build-angular): add validation to fileReplacement…

fileReplacement 旨在将编译源文件（JavaScript 或 TypeScript）替换为构建中的其他编译源文件。通过此更改，我们添加了验证以在文件具有不受支持的扩展名时使构建失败。

因此，Angular 11 改变了两件事。首先你必须使用src 和replaceWith 而不是replace 和with。虽然这无济于事，因为你会得到Data path ".fileReplacements[1].replace" should match pattern "\.(([cm]?j|t)sx?|json)$".，但如果你使用unsupported file types，比如.scss。

---

2020 年 2 月更新：仍然不起作用。使用 Angular 9.0.0 测试。

---

但有一个解决方法：
您可以在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 */

请注意，您不能在导入语句中的文件名中包含 _（下划线）
（更多详情请阅读Partials section）

如何使用：

// '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 to richardtreier）

---

这种方法的缺点：

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