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

做Smokey Dawson commented，

"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 文件。

---

在 Angular 6 中，这更容易。编译是自动处理的！那怎么办？要在组件级别使用 scss，您需要使用扩展名 scss 命名文件（同样适用于 less、styl）。在您的 component.ts 中，您也将相应的样式更改为 scss。

https://i.stack.imgur.com/mIpGP.png

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

https://i.stack.imgur.com/619xD.png

这里是想要探索自己的人的第一部分的文档链接：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

而且您不必使用前面的命令，它是一个配置命令，允许我们更新 angular.json 文件中的指定字段（因为它已经设置好了）。

---

目前在 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 属性已更改为仅 style。来自 Angular Github here。

---