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

Question

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

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

在旧的angular cli中。json有一个部分可以设置＜code＞stylExt

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

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

＜code＞匹配多个模式，而只有一个模式必须验证。

建筑产生：

架构验证失败，出现以下错误：数据路径“['defaults']”不应具有其他属性（styleExt）。

查看CLI的文档，我没有看到任何可以指示放置“样式Ext”的位置的内容。

我看到其他答案建议：ng设置默认.styleExt scss，抛出得到/设置已被弃用，以支持配置命令。

我尝试ng config setdefaults.styleExtscss和npm config setdefaults.styleExtscss，前者抛出错误，后者显然对文件没有影响，但没有错误。

Answer 1

目前版本为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。

Answer 2

在Angular 6中，比这更容易。编译是自动处理的！怎么样？要在组件级别使用scss，您需要使用扩展名为scss的文件命名（同样，使用较少，styl）。在您的组件中。您也可以将相应的样式更改为scss。

要在全球范围内使用Scss（src/样式.css），那么您需要更改样式.css样式.scss（同样少，样式...等）。然后，您继续使用角度.json并更改旧样式.css为新的样式.scss值。如下图所示：

这里是第一部分的文档链接，供那些想探索自己的人使用：https://angular.io/guide/component-styles#non-css样式文件

现在如何设置，ng-cli，以便在生成新组件时，默认情况下扩展将是scs？按如下方式使用 ng 配置命令：

 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

做着斯莫基·道森评论的事情，

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

以上是结果。因此，在您的应用程序中，在关键原理图下，添加一个关键@schematics/角度：组件，并将关键样式ext设置为scs。

这应适用于角度。项目根目录中的json文件。