Angular-cli 从 css 到 scss

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

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

对于现有项目

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

将默认样式扩展更改为 scss

Manually change in .angular-cli.json (Angular 5.x and older) or angular.json (Angular 6+) or run:
ng config defaults.styleExt=scss

如果出现错误：Value cannot be found. 使用命令：

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

(*来源：)

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

Manually change the file extensions in apps[0].styles in angular.json

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

Change the styleUrls in your components to match your new file names

对于未来的项目

正如@Serginho 提到的，您可以在运行宁 ng new 命令

时设置样式扩展

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

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

ng config --global defaults.styleExt=scss

Answer 2

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

在.angular.json中手动更改：

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

Answer 3

CSS Angular CLI 的预处理器集成：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 4

打开angular.json文件

1.change 来自

"schematics": {}

到

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

更改自（在两个地方）

"src/styles.css"

到

"src/styles.scss"

然后检查并重命名所有 .css 个文件并从 .css to .scss

更新 component.ts 个文件 styleUrls

Answer 5

对于Angular6，

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

注意：@schematics/angular 是 Angular CLI

的默认原理图

Answer 6

在ng6中你需要使用这个命令，按照类似post:

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

Answer 7

使用命令：

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

Answer 8

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

使 SCSS 在 Nx 工作区中工作的命令：

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

Answer 9

可以应用暴力破解。 这将努力改变，但这是一个更长的过程。

转到应用程序文件夹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 10

现有项目:

在angular.json文件中

在build部分和test部分，替换：

"styles": ["src/styles.css"], 来自 "styles": ["src/styles.scss"],
替换：

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

Using ng config schematics.@schematics/angular:component.styleext scss command works but it does not place the configuration in the same place.

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

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

ng n project-name --style=scss

全局配置

新版本好像没有全局命令

Answer 11

在最新版本Angular(v9)中，需要在angular.json

中添加以下代码

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

可以使用以下命令添加：

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

Answer 12

执行迁移的一种快速简便的方法是使用示意图 NPM 包 schematics-scss-migrate。此包将所有 css 个文件重命名为 scss 个文件：

ng add schematics-scss-migrate

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

Answer 13

首先在您的项目中安装：

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

在您的 Angular CLI 项目中：

运行以下命令：

ng g schematics-scss-migrate:scss-migrate

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

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

我已经在我的 angular 9 项目上尝试过这个并且它成功了......不需要额外的努力来重命名文件......只需输入命令和 BOOM！现在您的项目已迁移到 scss 项目。

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

Answer 14

对于Angular 11+

手动更改 angular.json.

替换"schematics": {},

和

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

Answer 15

显然有不止一种方法可以做到这一点，但是使用最新版本的 angular 我得到了另一个我想保留的原理图值。由于这个其他值，命令 ng config schematics.@schematics/angular:component.styleext scss 对我来说失败了，所以我采用了新值并自己将其输入到 angular.json 中。这是您必须输入的新值：

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

而 angular.json 最后看起来像这样：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  ...
  "projects": {
    "yourapp": {
      ...
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        },
        "@schematics/angular:component": {
          "style": "scss"
        }
...

那你就得

将所有 css 文件重命名为 scss 和
将您文件中的所有引用更改为那些。

您应该完成这些步骤。

Answer 16

手动更改位于文件末尾的“angular.json”中的以下代码。

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

请将文件从 .css 重命名为 .scss 并将所有引用更改为相同的

Answer 17

对于 angular 版本 12 只需将 styles.css 文件重命名为 styles.scss 并将 angular.json src/styles.css 更新为 src/styles.scss

Angular-cli 从 css 到 scss

Angular-cli from css to scss

css

sass

angular-cli

angular

angular6

对于现有项目

对于未来的项目