Question

我已阅读documentation，其中说如果我想使用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'(…)

我该如何解决这个问题？

Answer 1

对于Angular 6 ，请检查Official documentation

注意：对于早于@angular/cli的{{1}}版本，请使用6.0.0-beta.6代替ng set。

对于现有项目

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

将默认样式扩展名更改为css

手动更改.angular-cli.json（Angular 5.x及更早版本）或angular.json（Angular 6+）或运行：
scss

如果收到错误：ng config defaults.styleExt=scss请使用以下命令：

ng config schematics。@ schematics / angular：component.styleext scss

（*来源：Angular CLI SASS options）

将现有的Value cannot be found.文件重命名为.css（即styles.css和app / app.component.css）
指向CLI以查找styles.scss

在angular.json
中的.scss中手动更改文件扩展名

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

更改组件中的apps[0].styles以匹配新文件名

对于未来的项目

正如@Serginho所提到的，您可以在运行styleUrls命令

ng new

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

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

Answer 2

从ng6开始，这可以通过在根级别添加到ORDER BY CITY的以下代码来完成：

手动更改angular.json：

.angular.json

Answer 3

打开 angular.json 文件

1.从

改变

"schematics": {}

到

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

从（在两个地方）改变

"src/styles.css"

到

"src/styles.scss"

然后检查并重命名所有.css个文件，并从.css to .scss更新component.ts文件styleUrls

Answer 4

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

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

ng new sassy-project --style=sass

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

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

Angular CLI Documentation for all major CSS preprocessors

Answer 5

对于Angular 6，

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

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

Answer 6

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

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

可以使用以下命令添加：

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

Answer 7

使用命令：

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

Answer 8

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

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

Answer 9

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

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

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

Answer 10

对于现有项目：

在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

用于全局配置

新版本似乎没有全局命令

Answer 11

首先在您的项目中安装：

npm i --save-dev schematics-scss-migrate

在您的 Angular CLI 项目中：

运行以下命令：

ng g schematics-scss-migrate:scss-migrate

以上命令将在消费项目中执行以下操作：

递归地重命名 src 文件夹中的所有样式表。
更改各个组件类中的 styleUrls 以指向样式表的新文件名。
更新 angular.json 文件中的组件样式原理图值，如果原理图不存在，则创建一个，以及
将 angular.json 文件中的所有 styles.css 引用重命名为 styles.scss。

我已经在我的 angular 9 项目中尝试过这个，它奏效了...无需额外的努力来重命名文件...? 只需输入命令和 BOOM ！！！现在您的项目已迁移到 scss 项目。

参考： https://www.npmjs.com/package/schematics-scss-migrate

Answer 12

可以应用暴力更改。 可以更改此方法，但这需要更长的时间。

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

Answer 13

执行迁移的一种快速简便的方法是使用原理图NPM程序包diagrams-scss-migrate。该软件包将所有css重命名为scss文件：

ng添加示意图-scss-migrate

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

Answer 14

对于 Angular 11+

在 angular.json. 中手动更改

替换 "schematics": {},

与

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

Answer 15

创建新角度项目时：

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

Angular-cli从css到scss

15 个答案:

对于现有项目

对于未来的项目