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

Question

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

现在调用使用新Angular CLI生成的新配置文件angular.json而不是angular-cli.json.该文件的方案也有所不同,具有新属性.

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

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

但是我不知道究竟要把它放在哪里,因为在"test"和"lint"属性之后,给出了一个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 scss并且npm config set defaults.styleExt scss前者抛出错误而后者显然对文件没有影响,但没有错误.

Answer 1

正是做了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项目根目录中的文件.

Answer 2

在Angular 6中,它更容易.编译自动处理!那怎么样？要在组件级别使用scss,您需要使用扩展名scss命名该文件(同样适用于less,styl).在你的component.ts中你也将相应的样式更改为scss.

这是来自doc的剧本:

要在全局范围内使用Scss(src/styles.css),那么你需要将styles.css更改为styles.scss(同样适用于less,styl等).然后你继续使用angular.json并将旧的styles.css更改为新的styles.scss值.如下图所示:

这里是第一部分文档的链接,用于想要探索自己的文档:https: //angular.io/guide/component-styles#non-css-style-files

现在如何设置,ng-cli所以在生成新组件时,扩展名默认为scss？ 使用以下ng config命令:

 ng config schematics.@schematics/angular:component.styleext scss

这将更新angular.json:

"schematics": {
    "@schematics/angular:component": {
        "styleext": "scss"
    }
} 

这相当于旧的angular-cli.json

    defaults: {
        "styleext": "scss"
    }

这是针对已经启动但未设置为默认为scss的项目.如果要创建新项目,请使用该选项--style指定如下:

ng new my-project --style=scss

并且您不必使用precedent命令,它是一个允许我们更新angular.json文件中指定字段的config命令(因为它已经设置好了).