从CSS到CSS的Angular CLI

134

我读过文档，其中说如果要使用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'(…)

— 杰米
source

1

这仅适用于从那时起生成的文件，我认为它不能解决您已经拥有的文件。如果您git diff将看到更改的内容。

— jonrsharpe

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

— 杰米

您怎么还没有文件？如果要创建一个新项目，为什么要这样配置？

— jonrsharpe

只是从angular2开始。我正在努力弄清楚。

— 杰米

1

如果要创建一个新项目，请ng new whatever --style=scss 按照docs中的说明进行操作。如果这不是您要执行的操作，请不要遵循配置现有项目的说明！

— jonrsharpe

267

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

注意：对于@angular/cli比旧版本6.0.0-beta.6使用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 config schematics.@schematics/angular:component.styleext scss

（*来源：Angular CLI SASS选项）

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

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

指向组件以查找新样式文件

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

对于未来的项目

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

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

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

ng config --global defaults.styleExt=scss

— 别致
source

6

编辑：我只需要刷新实时生成器。它可以正常工作

— CristianTraìna17年

1

@ angular / cli 1.7.3：将defaults.styleExt从更改css为scssin .angular-cli.json将为以后生成的每个新组件自动创建scss文件。

— SimonHawesome

4

ng为现有项目设置defaults.styleExt scss

— smedasn

9

对于角度6，请遵循以下github.com/angular/angular-cli/wiki/stories-css-preprocessors

— hamilton.lima

22

@chovy对于最新的角度cli版本，在我的情况下（6.0.7），请对现有项目使用此命令：ng config schematics.@schematics/angular:component.styleext scss @ hamilton.lima

— Farhan

52

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

手动更改.angular.json：

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

— 何塞·奥里维拉
source

我有 schematics没有根目录，但嵌套在的项目中angular.json。我应该忽略它，而是在根级别添加它吗？

— mcheah

1

@mcheah，是的，这也是我的设置方式，并且它正在工作。

— 埃里克·索克

我把我的嵌套在项目内，看起来也很好，就像供任何有相同问题的人参考。

— mcheah

更新到ng6最新版本后，我schematics现在也嵌套了。

— 何塞·奥里维拉

这似乎对我没有任何改变。仍不处理.css文件中的scss规则。

— 胆汁

34

打开angular.json文件

1.从

"schematics": {}

至

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

从（在两个地方）更改

"src/styles.css"

至

"src/styles.scss"

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

— 巴拉
source

4

步骤1可以通过CLI执行：ng config schematics.@schematics/angular:component.styleext scss 如官方文档中所指定：github.com/angular/angular-cli/wiki/stories-css-preprocessors

— Marian07 '18

13

对于Angular 6，

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

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

— 富兰克林·虔诚
source

11

Angular CLI的CSS预处理器集成：6.0.3

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

ng new sassy-project --style=sass

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

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

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

— 天使罗姆人
source

1

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

— chovy

从Angular CLI 6.0.8 ng config（如上所述）开始，这是最好的方法，但是您仍然需要将*.css文件重命名为*.scssAND angular.json并style.css使用style.scssAND 替换对中的引用，styleUrls并将属性中的所有组件文件引用更新为新名称。...那么效果很好！

— gkl

8

对于现有项目：

在angular.json文件中

在build部分和test部分取代：

"styles": ["src/styles.css"], 通过 "styles": ["src/styles.scss"],
更换：

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

使用ng config schematics.@schematics/angular:component.styleext scss命令有效，但不会将配置放在同一位置。

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

对于新项目，此命令可以完成所有工作：

ng n project-name --style=scss

对于全局配置

新版本似乎没有全局命令

— 维本
source

6

使用命令：

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

— Himanshu Sharma
source

3

根据类似的帖子，在ng6中，您需要使用此命令：

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

— 詹姆森·桑德斯
source

3

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

使SCSS在Nx工作空间中工作的命令：

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

— 提洛
source

辉煌，一直在寻找。谢谢！

— 阮·彼得森

2

可以应用暴力更改。 这将可以进行更改，但这是一个更长的过程。

转到应用程序文件夹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中的步骤。

— 弗兰克·特尼
source

1

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

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

可以使用以下命令添加：

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

— 帕塔·兰詹（Partha Ranjan）
source