Angular-cli从css到scss

Question

我已经阅读了文档,其中说如果我想使用,scss我必须运行以下命令:

ng set defaults.styleExt scss

但是,当我这样做并生成该文件时,我仍然在我的控制台中收到此错误:

ng set defaults.styleExt scss

我该如何解决？

Answer 1

对于Angular 6,请查看官方文档

注意:对于@angular/cli早于6.0.0-beta.6使用的版本ng set代替ng config.

对于现有项目

在使用默认css样式设置的现有angular-cli项目中,您需要执行以下操作:

1. 将默认样式扩展名更改为 scss

手动更改.angular-cli.json(Angular 5.x及更早版本)或angular.json(Angular 6+)或运行:

ng config defaults.styleExt=scss

2. 将现有Value cannot be found.文件重命名为.css(即styles.css和app/app.component.css)

3. 指向CLI以查找styles.scss

手动更改.scssangular.json中的文件扩展名

4. 指向组件以查找新样式文件

更改apps[0].styles组件以匹配新文件名

对于未来的项目

正如@Serginho所提到的,您可以在运行styleUrls命令时设置样式扩展名

ng new your-project-name --style=scss

如果要为将来创建的所有项目设置默认值,请运行以下命令:

ng config --global defaults.styleExt=scss

Answer 2

从ng6开始,这可以通过angular.json在根级别添加以下代码来完成:

手动更改.angular.json:

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

Answer 3

打开angular.json文件

改变

"schematics": {}

至

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

2. 改变(在两个地方)

"src/styles.css"

至

"src/styles.scss"

然后检查并重命名所有.css文件并更新component.ts文件styleUrls.css to .scss

Answer 4

首先安装在您的项目中：

npm i --save-dev schematics-scss-migrate

在您的 Angular CLI 项目中：

运行以下命令：

ng g schematics-scss-migrate:scss-migrate

上面的命令将在使用项目中执行以下操作：

1. 递归重命名src文件夹中的所有样式表。
2. 更改相应组件类中的styleUrl，以指向样式表的新文件名。
3. 更新angular.json文件中的组件样式原理图值，或者如果原理图不存在则创建一个值，并且
4. 将angular.json文件中的所有styles.css引用重命名为styles.scss。

我已经在我的 Angular 9 项目上尝试过这个方法，它有效...不需要额外的努力来重命名文件...只需输入命令即可！现在您的项目已迁移到 scss 项目。

参考： https: //www.npmjs.com/package/schematics-scss-migrate

Answer 5

对于Angular 6,

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

注意:@ schematics/angular是Angular CLI的默认原理图

Answer 6

Angular CLI的CSS预处理器集成:6.0.3

生成新项目时,您还可以定义样式文件所需的扩展名:

ng new sassy-project --style=sass

或者在现有项目上设置默认样式:

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

所有主要CSS预处理器的Angular CLI文档

Answer 7

在最新版本的 Angular (v9) 中，需要添加以下代码 angular.json

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

可以使用以下命令添加：

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

Answer 8

对于现有项目：

在angular.json文件中

1. 在build部分和test部分取代：

   "styles": ["src/styles.css"], 经过 "styles": ["src/styles.scss"],

2. 代替：

   "schematics": {}, 经过 "schematics": { "@schematics/angular:component": { "style": "scss" } },

使用ng config schematics.@schematics/angular:component.styleext scss命令有效，但它不会将配置放在同一个地方。

在您的项目中，将.css文件重命名为.scss

对于一个新项目，这个命令完成所有工作：

ng n project-name --style=scss

用于全局配置

新版本好像没有全局命令

Answer 9

执行迁移的一种快速而简单的方法是使用原理图 NPM 包schematics-scss-migrate。这个包将所有 css 文件重命名为 scss 文件：

ng add schematics-scss-migrate

https://github.com/Teebo/scss-migrate#readme

Answer 10

手动更改“angular.json”中的以下代码，该代码位于文件末尾。

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

请将文件从 .css 重命名为 .scss 并将所有引用更改为相同的

Answer 11

使用命令：

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

Answer 12

显然有不止一种方法可以做到这一点，但是通过最新版本的 Angular，我得到了另一个我想保留的原理图值。由于这个其他值，该命令ng config schematics.@schematics/angular:component.styleext scss对我来说失败了，所以我采用了新值并自己将其输入到 中angular.json。这是您必须输入的新值：

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

angular.json最后看起来像这样：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  ...
  "projects": {
    "yourapp": {
      ...
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        },
        "@schematics/angular:component": {
          "style": "scss"
        }
...

那么你必须

• 将所有css文件重命名为scss和
• 将文件中的所有引用更改为这些。

您应该完成这些步骤。