如何在Angular CLI 6中添加Sass编译:angular.json?

角度 CSS

乐樱

2020-03-18

我刚刚使用新的Angular CLI 6.0创建了一个新的Angular项目,但是我需要将Sass编译添加到我的项目中。我知道您可以在创建项目时设置标志,但是我的项目已经创建并且工作已经完成。

通过新的Angular CLI生成的新配置文件现在称为angular.json而不是angular-cli.json文件的方案也有所不同,具有新的属性。

在旧的版本中angular-cli.json,您可以设置stylExt类似的内容,

"defaults": {
    "styleExt": "scss"
}

但我不确定确切将其放置在何处,如"test""lint"属性之后,会出现以下错误:

Matches multiple schemas when only one must validate.

建筑产生:

Schema validation failed with the following errors: Data path "['defaults']" should NOT have additional properties(styleExt).

查看CLI的文档,我看不到任何指示放置位置的信息"styleExt"

我还看到了其他一些建议:ng set defaults.styleExt scss抛出get/set have been deprecated in favor of the config command.

我尝试过ng config set defaults.styleExt scssnpm config set defaults.styleExt scss前者抛出一个错误,而后者显然对文件没有影响,但是没有错误。

第2090篇《如何在Angular CLI 6中添加Sass编译:angular.json?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
西里飞云 2020.03.18

完全按照Smokey Dawson的评论

"projects": {
  "angular-app": {
    "root": "",
    "sourceRoot": "src",
    "projectType": "application",
    "prefix": "app",
    "schematics": {
      "@schematics/angular:component": {
        "styleext": "scss"
      }
    },
    "architect": {...}
  }
}

以上是结果。因此,在您的应用中,在键下schematics,添加一个键@schematics/angular:component ,并将键styleext设置为scss

这应该应用于angular.json项目根目录中的文件。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android