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

我刚刚创建了一个新的 Angular 项目使用新的 Angular CLI 6.0，但我需要添加 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.

和建筑产品:

架构验证失败，出现以下错误: 数据路径“[‘默认’]”不应该有其他属性(styleExt)。

看看 CLI 的文件，我没有看到任何东西，可以指示在哪里放置 "styleExt"。

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

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

49661 次浏览
小开
最佳答案

完全按照 斯莫基 · 道森评论道的做法,

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

小开

在角度6中，它比那个更容易。编译是自动处理的！ 为什么？ 要在组件级使用 信息交换系统，您需要将文件命名为扩展名为 信息交换系统(与 更少 Styl相同)。在你的 组件你改变相应的样式为 信息交换系统太。

下面是博士的一个截图: enter image description here

要在全局范围内使用 Scss (src/styles.css) ，那么需要将 styles.css 更改为 styles.Scss (对于 less，styl... ... 等等也可以这样做)。然后转到 angular.json 并将旧的 styles.css 更改为新的 styles.scss 值。如下图所示:

enter image description here

下面是文档第一部分的链接，可以帮助你了解自己: 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"
}
}

它相当于旧的 angle-cli. json

    defaults: {
"styleext": "scss"
}

这是针对已经启动但未设置为默认为 scss 的项目的。如果您正在创建一个新项目，那么使用选项 --style指定如下:

ng new my-project --style=scss

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

小开

目前在9.0.6版本中，这有点不同。根据上面的 迪科和 斯莫基 · 道森，您可以在 angular.json 中使用以下内容:

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

但是在后来的版本中，Styleext的属性已经改为仅仅是 风格。


提交答案