如何在Angular 6中启用SCSS

3 年 ago
清, 扬
1 minute

首先

就在前几天，Angular6 正式版终于发布了?
然而，Angular-CLI 的设置文件 .angular-cli.json 已经被改成了 angular.json，并且随之而来的是一系列重大的规格变更。

本篇文章将简要介绍 angular.json 的使用方法，以其中最为流行的「启用scss」为例进行展示。

在 angular.json 中启用 scss。

查看 angular.json 的规格，可以看到 angular.json 在 projects 属性中设置了项目，而且在该项目的 schematics 属性中以 @schematics/angular:component 或 @schematics/angular:directive 作为键名来输入要设置的项目内容，似乎已经改变为这种方式。

试试看

ng new my-app

我尝试创建样本项目，并自动生成了下面的 angular.json 文件。

  ...
  "projects": {
    "my-app": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      ...

只需要一个选项：
这个示意图里

    "schematics": {
        "@schematics/angular:component": {
            "styleext": "scss"
        }
    }

通过设置，现在可以在CLI中使用新的组件生成并使用启用了scss的状态。

> ng g c test

CREATE src/app/test/test.component.scss (0 bytes)
CREATE src/app/test/test.component.html (23 bytes)
CREATE src/app/test/test.component.spec.ts (614 bytes)
CREATE src/app/test/test.component.ts (262 bytes)

在上述例子中，调整框图也可以根据项目自身的设置来进行，但是如果您不希望在每个项目中都要进行设置，可以将其作为angular.json文件的顶级属性来使其在所有项目中生效。

利用CLI进行设置。

如果要通过CLI进行设置，则似乎应该这样做。
但是，ng set被更换为ng config。
但是，，在6.0.0中会出现错误。我认为它将在不久的将来得到修复。

ng config schematics.@schematics/angular:component.styleext scss

附加说明：

目前的情况是，根据JSON格式的指定，似乎可以从命令行界面进行设置。

ng config schematics.@schematics/angular:component '{ styleext: "scss"}'

创建新项目时

在创建新项目时，通过添加–style=scss参数，可以确保输出了schematics中配置好的angular.json（6.0.0版本）。

ng new my-app --style=scss

原理图的默认设置项目清单

    • @schematics/angular:component

 

    • @schematics/angular:directive

 

    • @schematics/angular:module

 

    • @schematics/angular:service

 

    • @schematics/angular:pipe

 

    @schematics/angular:class

如果你想知道那个设置在哪里去了！？或许你可以试着找到上述内容。

bannerAds