如何在现有的 Angular 项目中添加 SCSS

Question

我使用 angular13.0.4 ，我想将 css 文件更新为 Scss 。我尝试了不同的方法，但使用这些技巧没有取得任何成功，如何在现有的角度项目中将 css 更改为 scss。

Answer 1

在最新版本的 Angular (v13) 中，npm 库从 css 迁移到 scss，反之亦然

ng add schematics-scss-migrate

Answer 2

如果您创建项目时选择默认样式选项 CSS，则可能两者都没有

ng config defaults.styleExt=css也不

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

工作，因为 Angular CLI 会尝试更改文件中的这些选项angular.json，并且它们根本不是使用默认 CSS 选项创建的。如果第一步这些选项都不起作用，您可以angular.json自己在文件中添加该条目，位于schematics：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "myProject": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
...

当然，这只会更改新生成的组件的扩展名。如果您需要迁移项目，则必须重命名所有样式文件，将扩展名从 CSS 更改为 SCSS，以及@Component每个组件的指令中对这些文件的引用。

Answer 3

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

1. 将默认样式扩展更改为 scss 手动更改 .angular-cli.json（Angular 5.x 及更早版本）或 angular.json（Angular 6+）或运行：

ng config defaults.styleExt=scss

如果出现错误：找不到值。使用命令：

ng 配置原理图。@schematics/angular:component.styleext scss

（*来源：Angular CLI SASS 选项）

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

3. 指向 CLI 查找 styles.scss

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

4.指向组件以查找新的样式文件更改组件中的 styleUrls 以匹配新文件名