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

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

main.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文件。

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

使用方法：

// '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配置。

如何用Angular CLI替换SCSS文件？

1 个答案: