如何用Angular CLI替换SCSS文件? [英] How to replace SCSS files with Angular CLI?

问题描述

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

Angular CLI provides the possibility to replace files when building the project. I would like to use this functionality to replace a SCSS file with default styling, with a SCSS file that contains customer specific CSS.

但是Angular CLI似乎不替换SCSS文件.我怎么能做到这一点?

But Angular CLI seems not to replace the SCSS files. How could I achieve this?

我尝试过的事情:

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文件的文件替换无效，因为从未调用过特殊的调试语句，但是默认情况下，即使文件已经被重新放置，也是如此.

---

Result:
File replacement for .ts files works, but not for .scss files, as the special debug statment never gets called, but the default does, even the file should have been repalced.

推荐答案

Angular.io指出:

Angular.io states that:

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

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

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

This is in fact the vision, but according to this GitHub thread, this is not true for now.
It seems up till now, only .ts and .html files are supported.

因此，当前问题的答案为否，尚无法替换SCSS文件.

Therefore, currently the answer to the question is no, it is yet not possible to replace SCSS files.

更新2020年2月:仍然无法正常工作.已通过 Angular 9.0.0 测试.

Update Feb-2020: Still doesn't work. Tested with Angular 9.0.0.

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

But there is a workaround:
You can use different configurations in angular.json to achieve the same goal - replacing a SCSS file.

文件夹结构:

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

请注意，导入语句中不得包含文件名中的_(下划线)
(有关详细信息，请阅读部分" )

Note that you mustn't include the _ (underscore) from the filename in the import statement
(for more details read the 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至 richardtreier )

此方法的缺点:

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

• It forces you to have a specific folder structure to separate your different SCSS configurations
• It might force you to move those folders out of your normal folder structure.
  For example, "includePaths": ["src/scss"] won't work with the folder structure mentioned above, since the SCSS configs can't be loaded separately.

这篇关于如何用Angular CLI替换SCSS文件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！