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

Question

我使用的是Angular 13.0.4，想要将CSS文件更新为SCSS。我尝试了不同的方法，但没有成功运用那些技巧，如何在现有的Angular项目中将CSS更改为SCSS。

- Mama

Answer 1

在最新版本的Angular（v13）中，它的npm库从css迁移到scss或者相反。

ng add schematics-scss-migrate

- Mohamed Farouk

---

非常糟糕的脚本。不要这样做。 - Leandro Bardelli

@LeandroBardelli 我该怎么办？ - Mohamed Farouk

你的答案很好，这就是我不会给你投反对票的原因。问题在于脚本。它只能运行一半的脚本。 - Leandro Bardelli

Answer 2

如果您在创建项目时选择了默认的CSS样式选项，则可能会发现ng config defaults.styleExt=css和ng config schematics.@schematics/angular:component.styleext scss都不起作用，因为Angular CLI将尝试在angular.json文件中更改这些选项，而默认CSS选项根本没有创建。如果这些选项都无法解决问题，您可以首先在angular.json文件中自己添加条目，在下面。

{
  "$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指令中对这些文件的引用。

- Henrique Baron

Answer 3

在一个已存在的使用默认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)

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

3. 指定CLI查找styles.scss

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

4.将组件指向找到你的新样式文件 将你的组件中的styleUrls更改为匹配你的新文件名

- lakshna S

---

我已经尝试过这些技巧，但对我都没有用。 - Mama

你能再具体些吗？你已经尝试过什么并且没有起作用，或者在互联网上找不到？因为你所询问的问题可能有多种答案，这将需要撰写一篇完整的文章（而这已经存在）。抱歉，我已经将其作为回复添加了，本来想将其添加为评论。 - Raphaël Balet

作为对你所写内容的回应。你是否将以下内容添加到了你的 angular.json 文件中？"stylePreprocessorOptions": { "includePaths": ["src/scss"] },然后，你是否已经将每个 .css 文件更改为 .scss？ - Raphaël Balet