如何在 Angular CLI 6: angular.json 中添加 Sass 编译? [英] How do I add Sass compilation in Angular CLI 6: angular.json?

问题描述

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

I just created a new Angular project using the new Angular CLI 6.0, but I need to add Sass compilation to my project. I'm aware you can set a flag when you create a project, but my project is already created and work has been done.

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

The new configuration file that gets generated with the new Angular CLI is now called angular.json rather than angular-cli.json. The scheme for the file is also different, with new properties.

在旧的 angular-cli.json 中有一个部分，您可以像这样设置 stylExt，

In the old angular-cli.json there is a section where you can set the stylExt like so,

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

但我不确定把它放在哪里，因为在 "test" 和 "lint" 属性之后，给出了一个 lint 错误:

but I'm not sure where exactly to put this, as after the "test" and "lint" properties, gives a lint error of:

当只有一个必须验证时匹配多个模式.

和建筑产生:

架构验证失败，出现以下错误:数据路径['defaults']"不应该有额外的属性(styleExt).

查看 CLI 的文档 我没有看到任何可能指示放置 "styleExt" 的位置.

Looking at CLI's docs I'm not seeing anything that would indicate where to put "styleExt".

我看到了其他建议的答案:ng set defaults.styleExt scss which throwsget/set 已被弃用，以支持 config 命令..

I've seen other answers advising: 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 前者抛出错误，后者显然对文件没有影响，但没有错误.

I tried ng config set defaults.styleExt scss and npm config set defaults.styleExt scss with the former throwing an error and the latter apparently having no effect on the file, but without error.

推荐答案

完全按照 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.

The above is the result. So in your app, under the key schematics, add a key @schematics/angular:component with the key styleext set to scss.

这应该应用于项目根目录中的 angular.json 文件.

This should be applied to your angular.json file in the root directory of your project.

这篇关于如何在 Angular CLI 6: angular.json 中添加 Sass 编译?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！