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

Posted 2023-02-22

技术标签:

【中文标题】如何在 Angular CLI 6: angular.json 中添加 Sass 编译？【英文标题】：How do I add Sass compilation in Angular CLI 6: angular.json? 【发布时间】：2018-10-14 08:32:39 【问题描述】：

我刚刚使用新的 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，前者抛出错误，后者显然对文件没有影响，但没有错误。

【问题讨论】：

我将使用标志--style=scss 创建一个新项目，然后看看angular.json 在生成的项目中是如何设置的，然后将angular.json 复制到您的应用程序中跨度> @JuvenileSnow 你知道这是个好主意，哈哈。像这样的小事让我怀疑我是否适合开始一个应用程序。 --style=scss @SmokeyDawson TY 救了我！ 【参考方案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 文件。

【讨论】：

并将src/styles.css 引用更改为angular.json 中的src/styles.scss 是的，这可以解决问题。 @Dico，请问您有指向“原理图”“样式文本”主题的文档的链接吗？ @Herr_Hansen，它是“styleext”（样式扩展），而不是“styletext”。 github.com/angular/angular-cli/wiki/angular-workspacegithub.com/angular/angular-cli/blob/v6.0.0-rc.8/packages/… angular-workspace, @schematics/angular:component, styleext 我也有s-s-r，这个效果会在构建的时候自动产生还是我必须为sass编译配置webpack构建配置？【参考方案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 文件中的指定字段（因为它已经设置好了）。

【讨论】：

但是你怎么看生成的css文件呢？我们需要单独的工具吗？也看这篇文章blog.angularindepth.com/…【参考方案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。

【讨论】：

But in later versions the styleext property has changed to just style => 谢谢你，这就是我真正想要的