如何用Angular CLI替换SCSS文件？

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

但Angular CLI似乎无法取代SCSS文件。我怎样才能做到这一点

---

我所尝试的：

environment.default.ts

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

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

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

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

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

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

body { background-color: blue; }

body { background-color: red; }

@import 'scss-config';

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

环境.special.ts

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

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

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

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

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

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

body { background-color: blue; }

body { background-color: red; }

@import 'scss-config';

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

default/\u scss-config.scss

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

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

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

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

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

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

body { background-color: blue; }

body { background-color: red; }

@import 'scss-config';

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

special/\u scss-config.scss

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

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

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

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

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

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

body { background-color: blue; }

body { background-color: red; }

@import 'scss-config';

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

angular.json（仅限相关部分）

main.ts

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

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

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

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

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

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

body { background-color: blue; }

body { background-color: red; }

@import 'scss-config';

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

---

结果：

---

.ts

文件的文件替换有效，但不适用于

.scss

文件，因为从未调用特殊调试语句，但默认情况下，即使文件也应重新计算。

Angular.io声明：

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

事实上，这是一个愿景，但根据我们的观点，目前情况并非如此。
到目前为止，似乎只支持

.ts

和

.html

文件

因此，目前问题的答案是否定的，还不可能替换SCSS文件。

---

更新日期：2021年1月：仍然不起作用。使用角度11.0.9进行测试

TLDR:

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

// '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

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

• 它只支持以下类型的文件替换：

  .cjs

  ，

  .js

  ，

  .json

  ，

  .mjs

  和，

  .ts

背景：
文档中支持所有文件类型的初始语句似乎是错误的。对于Angular 11，引入了一个检查，以检查不支持的文件类型上的错误

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

因此，有两件事改变了。首先，您必须使用

src

和

replaceWith

而不是

replace

和

with

。尽管这没有帮助，因为您将获得

数据路径.fileReplacements[1]。如果您使用like
.scss
，请替换“应匹配模式”\。（[cm]？j|t）sx？| json）$”

---

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

---

但有一个解决方法：
您可以在

angular.json

中使用不同的配置来实现相同的目标—替换SCSS文件

文件夹结构：

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

// '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

src/scss/default/scss config.scss

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

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

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

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

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

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

body { background-color: blue; }

body { background-color: red; }

@import 'scss-config';

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

src/scss/special/scss config.scss

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

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

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

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

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

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

body { background-color: blue; }

body { background-color: red; }

@import 'scss-config';

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

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"
        }
      }
    }     
    [...]      
  }
}

请注意，在导入语句中不能包含文件名中的

。

（有关更多详细信息，请参阅）

如何使用它：

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

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


这种方法的缺点：

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

// '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


它强制您使用特定的文件夹结构来分隔不同的SCSS配置
这可能会迫使您将这些文件夹移出正常的文件夹结构。

例如，
“includePaths”：[“src/scss”]
无法与上述文件夹结构一起工作，因为无法单独加载scss配置
向我们展示您执行的命令tried@jo_va我想我已经找到了答案，但我添加了一个最小的例子。如果你知道一种方法来实现这一点，我很乐意接受你的答案。它很快就奏效了（Angular 8）@OrangeDog:我在Angular 11应用程序中尝试了上述方法，但它不起作用。你能在最新的Angular 11应用程序中使用它吗？@suvenk no，11和8是不同的numbers@OrangeDog：是的，我知道。你知道在Angular 11应用程序中是否还有其他方法可以实现这一点吗？是的，这对我来说在ng11中仍然有效。我更新了答案，以反映关于ng11中文件替换的更改，但由于解决方案没有使用该功能，因此没有问题。