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

问题描述

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

I just created a new Angular project using the new Angular CLI 6.0, but I need to add Sass compilation to my project. I'm aware you can set a flag when you create a project, but my project is already created and work has been done.

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

The new configuration file that gets generated with the new Angular CLI is now called angular.json rather than angular-cli.json. The scheme for the file is also different, with new properties.

在旧的angular-cli.json中，有一个部分可以像这样设置stylExt，

In the old angular-cli.json there is a section where you can set the stylExt like so,

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

但我不确定将其确切放置在什么位置，如在"test"和"lint"属性之后，会出现以下错误:

but I'm not sure where exactly to put this, as after the "test" and "lint" properties, gives a lint error of:

Matches multiple schemas when only one must validate.

建筑产生:

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

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

查看 CLI的文档，我没有发现任何会指出放置"styleExt"的位置.

Looking at CLI's docs I'm not seeing anything that would indicate where to put "styleExt".

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

I've seen other answers advising: ng set defaults.styleExt scss which throwsget/set have been deprecated in favor of the config command..

我尝试了ng config set defaults.styleExt scss和npm config set defaults.styleExt scss，前者抛出错误，而后者显然对文件没有影响，但没有错误.

I tried ng config set defaults.styleExt scss and npm config set defaults.styleExt scss with the former throwing an error and the latter apparently having no effect on the file, but without error.

推荐答案

确切地做，

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

以上是结果.因此，在您的应用中，在键schematics下，添加密钥@schematics/angular:component将键styleext设置为scss.

The above is the result.So in your app, under the key schematics,add a key @schematics/angular:componentwith the key styleext set to scss.

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

This should be applied to your angular.json file in the root directory of your project.

这篇关于如何在Angular CLI 6中添加Sass编译:angular.json?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！