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

Question 1

我刚刚使用新的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 scss，npm config set defaults.styleExt scss前者抛出一个错误，而后者显然对文件没有影响，但没有错误。

Question 2

完全按照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项目根目录中的文件。

Question 3

在Angular 6中，要容易得多。编译会自动处理！怎么了要在组件级别使用scss，您需要使用扩展名scss来命名文件（相同的名称是styl）。并且在您的component.ts中，您也将相应的样式更改为scss。

这是该文档的屏幕截图：

并且要在全局范围内使用Scss（src / styles.css），则需要将styles.css更改为styles.scss（同样少用，样式...等）。然后继续执行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"
    }

那是针对已经启动但未设置为默认值的项目。如果要创建一个新项目，请使用该选项--style指定如下：

ng new my-project --style=scss

而且您将不必使用previousnt命令，该命令是一个配置命令，该命令使我们可以更新angular.json文件中的指定字段（因为它将已经设置）。

Question 4

当前在9.0.6版中，这有点不同。根据上述的Dico和Smokey Dawson，您可以在angular.json中使用以下代码：

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

但在以后的版本中styleext性质已经改变，只是风格。此处来自Angular Github 。