从 css 到 scss 的 Angular-cli

对于 Angular 6，检查 Official documentation

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

对于现有项目

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

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

手动更改 .angular-cli.json（Angular 5.x 和更早版本）或 angular.json（Angular 6+）或运行：ng config defaults.styleExt=scss

如果您收到错误：Value cannot be found.，请使用以下命令：

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

（*来源：Angular CLI SASS options）

将现有的 .css 文件重命名为 .scss（即 styles.css 和 app/app.component.css） 指向 CLI 以查找 styles.scss

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

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

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

对于未来的项目

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

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

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

ng config --global defaults.styleExt=scss

---

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

在 .angular.json 中手动更改：

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

---

打开 angular.json 文件

1.从

"schematics": {}

至

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

从（在两个地方）改变

"src/styles.css"

至

"src/styles.scss"

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

---

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

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

可以使用以下命令添加：

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

---

对于现有项目：

在 angular.json 个文件中

在构建部分和测试部分，替换：“styles”：[“src/styles.css”]，由“styles”：[“src/styles.scss”]，替换：“schematics”：{}，由“示意图”：{“@schematics/angular:component”：{“风格”：“scss”}}，

使用 ng configSchematics.@schematics/angular:component.styleext scss 命令可以工作，但它不会将配置放在同一个地方。

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

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

ng n project-name --style=scss

用于全局配置

新版本似乎没有全局命令

---

对于 Angular 6，

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

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

---

首先安装在您的项目中：

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

在您的 Angular CLI 项目中：

运行以下命令：

ng g schematics-scss-migrate:scss-migrate

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

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

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

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

---

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

---

使用命令：

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

---

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

ng add schematics-scss-migrate

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

---

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

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

---

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

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

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

---

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

转到应用程序文件夹 src/app

打开这个文件：app.component.ts 把这段代码 styleUrls: ['./app.component.css'] 改成 styleUrls: ['./app.component.scss'] 保存并关闭。

在同一个文件夹 src/app

将 app.component.css 文件的扩展名重命名为 (app.component.scss) 对所有其他组件遵循此更改。 （例如家、关于、联系方式等...）

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

搜索并替换 css 将其更改为 (scss)。保存并关闭。

最后，重新启动您的 ng serve -o。

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

确保严格遵循 app/src 中的步骤。

---

对于 Angular 11+

在 angular.json. 中手动更改

替换 "schematics": {},

和

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

---

显然有不止一种方法可以做到这一点，但是在最近版本的 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 和

将文件中的所有引用更改为这些引用。

您应该完成这些步骤。

---

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

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

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

---

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

---