angular - 如何用 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'
};

默认/_scss-config.scss

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

special/_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 指出:

The main CLI configuration file, angular.json, [...] allows you to replace any file with a target-specific version of that file.

这实际上是愿景，但根据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 is meant to replace compilation source files (JavaScript or TypeScript) with other compilation source files in the build. With this change we add validation to fail the build when the files have unsupported extensions.

因此，在 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

(此解决方案来自上述线程 - 感谢 richardtreier)

---

这种方法的缺点:

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