css - 从 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'(…)

score 342 · Accepted Answer

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

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

对于现有项目

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

将默认样式扩展更改为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在in 中手动更改文件扩展名angular.json

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

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

对于未来的项目

正如@Serginho 提到的，您可以在运行ng new命令时设置样式扩展

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

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

ng config --global defaults.styleExt=scss

score 65 · Accepted Answer

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

手动更改.angular.json：

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

score 41 · Accepted Answer

打开angular.json文件

1.从

"schematics": {}

至

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

从（在两个地方）改变

"src/styles.css"

至

"src/styles.scss"

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

score 16 · Accepted Answer

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

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

可以使用以下命令添加：

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

score 13 · Accepted Answer

对于 Angular 6，

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

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

score 12 · Accepted Answer

对于现有项目：

在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

用于全局配置

新版本似乎没有全局命令

score 11 · Accepted Answer

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

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

ng new sassy-project --style=sass

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

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

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

score 11 · Accepted Answer

首先安装在您的项目中：

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

在您的 Angular CLI 项目中：

运行以下命令：

ng g schematics-scss-migrate:scss-migrate

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

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

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

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

score 6 · Accepted Answer

6

使用命令：

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

于 2018-08-25T05:42:15.340 回答

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

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

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

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

score 3 · Accepted Answer

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

ng add schematics-scss-migrate

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

score 3 · Accepted Answer

对于 Angular 11+

手动更改angular.json.

更换"schematics": {},

和

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

score 3 · Accepted Answer

可以应用蛮力更改。 这将有所改变，但这是一个较长的过程。

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

score 3 · Accepted Answer

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

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

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

score 2 · Accepted Answer

显然有不止一种方法可以做到这一点，但是在最近版本的 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文件重命名为scssand
将文件中的所有引用更改为这些引用。

您应该完成这些步骤。

score -1 · Accepted Answer

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

css - 从 css 到 scss 的 Angular-cli

17 回答 17

对于现有项目

对于未来的项目

Related

Reference