如何在现有的角度项目中添加 scss答案

【问题标题】：How to add scss in an existing angular project如何在现有的角度项目中添加 scss
【发布时间】：2023-01-09 04:32:35
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

ng add schematics-scss-migrate

【讨论】：

非常糟糕的剧本。不要这样做。
@LeandroBardelli 我该怎么办？
你的回答很好，这就是我不投票给你的原因。问题是脚本。仅适用于一半的脚本。

【解决方案2】：

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

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

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

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

（*来源：Angular CLI SASS 选项）
1. 将现有的 .css 文件重命名为 .scss（即 styles.css 和 app/app.component.css）
2. 指向 CLI 以查找 styles.scss
手动更改 apps[0].styles 中的文件扩展名 angular.json

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

【讨论】：

我已经尝试过这些技巧，但对我没有任何用处
你能更精确吗？您已经尝试过什么但没有用，或者在互联网上找不到？因为您的要求可以通过多种方式得到回答，并且需要写一整篇文章（已经写好了）-抱歉，我已经将其添加为响应，想将其添加为 cmets。
回应你所写的内容。您是否将以下内容添加到您的angular.json 文件中？ "stylePreprocessorOptions": { "includePaths": ["src/scss"] }, 那么，你是不是把每一个.css 文件都改成.scss 了？

【解决方案3】：

如果您在创建项目时选择默认样式选项作为 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 指令中引用这些文件。

【讨论】：