从CSS到SCSS的Angular-cli

Question

我读了文档，文档说如果我想使用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'(…)

- Jamie

---

这只适用于从那一点生成的文件，我认为它不会修复您已经拥有的文件。如果您运行 git diff 命令，您将看到它所做的更改。 - jonrsharpe

但是我还没有文件。只是想切换。 - Jamie

刚开始学习Angular2。我正在尝试弄清楚它的所有内容。 - Jamie

如果你正在创建一个新项目，请按照文档中所示使用 ng new whatever --style=scss 命令。如果不是这样，不要按照配置现有项目的说明进行操作！ - jonrsharpe

即使是现有的项目，我也可能只是使用所需的设置创建一个新项目，用新生成的配置文件覆盖当前项目的配置文件，并检查差异以保留想要的更改。 - jemand771

Answer 1

对于Angular 6，请查看官方文档

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

对于已有项目

如果您在已有的angular-cli项目中使用了默认的css样式，则需要执行以下几个步骤：

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以匹配你的新文件名

对于未来的项目

如@Serginho所述，你可以在运行ng new命令时设置样式扩展名

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

如果您想将默认设置应用于未来创建的所有项目，请运行以下命令：

ng config --global defaults.styleExt=scss

- Chic

---

我需要刷新实时构建程序，编辑一下。它现在可以正常工作了。 - Christian Vincenzo Traina

对于现有项目，运行命令“ng set defaults.styleExt scss”以设置默认样式扩展名为scss。 - smedasn

要使用Angular 6，请按照以下步骤https://github.com/angular/angular-cli/wiki/stories-css-preprocessors - hamilton.lima

针对最新版本的Angular CLI，若您的版本为6.0.7并想针对现有项目进行操作，请使用以下命令：ng config schematics.@schematics/angular:component.styleext scss。这是由@hamilton.lima提供的建议。 - Farhan

在Angular 12中，您会收到数据路径“/ schematics / @schematics〜1angular：component”不能有其他属性（styleext）的错误提示 - 请改用ng config schematics.@schematics/angular:component.style scss - BackSlash

Answer 2

从ng6开始，可以通过在根级别的angular.json中添加以下代码来实现：

在.angular.json文件中手动更改：

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

- Jose Orihuela

---

我的angular.json文件中的schematics不在根级别，而是嵌套在项目中。我应该忽略它，并将其添加到根级别吗？ - mcheah

@mcheah，是的，我的设置也是这样的，并且它正在工作。 - Eric Soyke

我把我的嵌套在项目中，看起来也很好用，这只是一个FYI，供有同样问题的人参考。 - mcheah

它正在运行。默认情况下，项目创建时间将为“schematics”：{}。我们必须像下面这样添加。 - gnganapath

那么你如何处理"styles": [ "src/styles.css" ],这部分呢？你手动将其更改为 src/styles.scss，然后也重命名文件吗？ - Cleb

Answer 3

打开 angular.json 文件

1. 将

"schematics": {}

改为

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

2. 更改两处 (at two places)

"src/styles.css"

为

"src/styles.scss"

然后检查和重命名所有的 .css 文件，并将组件的 styleUrls 从 .css 更新为 .scss

- BALA

---

第一步可以通过CLI完成：ng config schematics.@schematics/angular:component.styleext scss，根据官方文档说明：https://github.com/angular/angular-cli/wiki/stories-css-preprocessors - Marian07

如果您使用的是Angular v9或更高版本，请参考此答案：https://dev59.com/_FkR5IYBdhLWcg3w3AsM#61782667 - nedstark179

Answer 4

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

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

可使用以下命令进行添加：

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

- Partha Ranjan Nayak

---

对我来说不起作用，我已经尝试了10次。 - Kross

Angular 10 可以正常工作。请注意此回答中 "styleext" 和 "style" 的区别。 - Pierre

这种方法在Angular 14中仍然有效，我花了很长时间才找到它，因为大多数答案都使用styleext，正如@Pierre所指出的那样。 - Thiemo

目前最准确的答案是：这个可以在 Angular 14 中工作。ng set 似乎已经过时了。对我来说， ng config defaults.styleExt=scss 没有起作用。 - Shahryar Saljoughi

Answer 5

首先在你的项目中安装:

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

- abhijeet_shela

---

你的回答与已有的回答有何不同？我建议你通过编辑现有的回答来改进它（如果你有编辑权限）。 - jasie

我正在使用Angular 12，这个答案对我来说是最好的，只需要两个命令，一切都搞定了！@jasie的答案不同之处在于，如果你有数百个组件和样式表，你不必手动完成，因为那将是一个巨大的痛苦，你只需从终端运行两个命令，所有更改即时完成。 - Kingston Fortune

我正在使用 Angular 9，这对我来说运行得很好。顺便说一下，我不得不将 node-sass 包降级到 4.0.0 版本。 - Syed Umer Hasan

Answer 6

对于现有项目:

在 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

全局配置

新版本似乎没有全局命令

- veben

Answer 7

对于Angular 6，

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

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

- Franklin Pious

Answer 8

Angular CLI: 6.0.3 支持 CSS 预处理器集成

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

ng new sassy-project --style=sass

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

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

适用于所有主要CSS预处理器的Angular CLI文档

- Angel Roma

---

Invalid JSON character: "s" at 0:0. - chovy

从Angular CLI 6.0.8开始，ng config（如上所述）是最佳方法，但您仍然需要将*.css文件重命名为*.scss，并将angular.json中对style.css的引用替换为style.scss，并将styleUrls属性中所有组件文件引用更新为新名称。...然后它就可以正常工作了！ - gkl

Answer 9

使用schematic NPM包schematics-scss-migrate是快速且简单执行迁移的方法。该包将所有CSS文件重命名为SCSS文件：

ng add schematics-scss-migrate

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

- mahsa k

Answer 10

使用命令：

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

- himanshu sharma