从 css 到 scss 的 Angular-cli

Question

我读过documentation，上面说如果我想使用scss，我必须运行以下命令：

ng set defaults.styleExt scss

但是当我这样做并制作该文件时，我仍然在控制台中收到此错误：

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT:
no such file or directory, open
'/Users/Egen/Code/angular/src/styles.css'(…)

Answer 1

对于 Angular 6，请查看 Official documentation

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

对于现有项目

在使用默认 css 样式设置的现有 angular-cli 项目中，您需要做一些事情：

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

在.angular-cli.json（Angular 5.x 及更早版本）或angular.json（Angular 6+）中手动更改或运行：

ng config defaults.styleExt=scss

如果遇到错误：Value cannot be found. 使用命令：

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

(*来源：Angular CLI SASS options)

1. 将现有的.css 文件重命名为.scss（即styles.css 和app/app.component.css）

2. 指向 CLI 以查找 styles.scss

在angular.json中手动更改apps[0].styles中的文件扩展名

4. 指向组件以找到您的新样式文件

更改组件中的 styleUrls 以匹配新文件名

对于未来的项目

正如@Serginho 所说，您可以在运行ng new 命令时设置样式扩展

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 CLI 的 CSS 预处理器集成：6.0.3

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

ng new sassy-project --style=sass

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

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

Angular CLI Documentation for all major CSS preprocessors

Answer 4

打开 angular.json 文件

1.改变

"schematics": {}

到

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

1. 从（在两个地方）更改

"src/styles.css"

到

"src/styles.scss"

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

Answer 5

对于 Angular 6，

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

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

Answer 6

在ng6中需要用到这个命令，根据类似post：

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

Answer 7

使用命令：

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

Answer 8

对于遇到此线程的Nrwl extensions 用户：所有命令都被 Nx 拦截（例如，ng generate component myCompent），然后传递给 AngularCLI。

让 SCSS 在 Nx 工作区中工作的命令：

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

Answer 9

可以应用蛮力更改。 这会有所改变，但这是一个较长的过程。

进入应用文件夹src/app

1. 打开此文件：app.component.ts

2. 将此代码styleUrls: ['./app.component.css']更改为styleUrls: ['./app.component.scss']

3. 保存并关闭。

在同一个文件夹src/app

1. 将 app.component.css 文件的扩展名重命名为 (app.component.scss)

2. 对所有其他组件遵循此更改。 （例如家庭、关于、联系方式等...）

接下来是 angular.json 配置文件。它位于项目根目录。

1. 搜索并替换 css 将其更改为 (scss)。

2. 保存并关闭。

最后，重启你的ng serve -o。

如果编译器向您抱怨，请重新执行这些步骤。

请务必严格按照 app/src 中的步骤操作。

Answer 10

对于现有项目：

在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 11

在最新版本的Angular（v9）中，下面的代码需要添加angular.json

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

可以使用以下命令添加：

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

Answer 12

执行迁移的一种快速简便的方法是使用示意图 NPM 包schematics-scss-migrate。 此包将所有 css 文件重命名为 scss 文件：

ng add schematics-scss-migrate

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

Answer 13

首先在您的项目中安装：

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

在您的 Angular CLI 项目中：

运行以下命令：

ng g schematics-scss-migrate:scss-migrate

以上命令将在消费项目中执行以下操作：

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

我已经在我的 angular 9 项目上尝试过这个，它成功了......不需要额外的努力来重命名文件......?只需输入命令和 BOOM ！！！现在您的项目已迁移到 scss 项目。

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

Answer 14

对于 Angular 11+

手动更改angular.json.

替换"schematics": {},

与

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

Answer 15

显然有不止一种方法可以做到这一点，但在最近版本的 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和
• 将文件中的所有引用更改为这些引用。

您应该完成这些步骤。

Answer 16

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

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

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

Answer 17

对于角度版本 12 只需将 styles.css 文件重命名为 styles.scss 并将 angular.json src/styles.css 更新为 src/styles.scss