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

Question

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

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

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

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

但是我不知道在"test"和"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抛出get/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（同样少用，样式...等）。然后继续执行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"
    }

这是针对已经启动但未设置为默认值的项目。如果要创建一个新项目，请使用选项--style进行如下指定：

ng new my-project --style=scss

并且您将不必使用priorant命令，这是一个配置命令，该命令使我们可以更新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。