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

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's docs，我没有看到任何可以指示将"styleExt"放在哪里的东西。

我已经看到其他建议的答案：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，前者抛出错误，后者显然对文件没有影响，但没有错误。

Answer 1

做的正是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 文件。

Answer 2

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

这里是文档的屏幕截图：

要在全球范围内使用 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

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

Answer 3

目前在 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。