从 css 到 scss 的角斜率

我读过 文件，它说如果我想使用 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'(…)
191750 次浏览
小开
最佳答案

对于 Angular 6，查看官方文档

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

现有项目

在一个现有的角斜面项目中，使用默认的 css风格设置，你需要做一些事情:

  1. 将默认样式扩展更改为 scss

手动改变 .angular-cli.json(角度5.x 及以上)或 angular.json(角度6 +)或运行:

ng config defaults.styleExt=scss

如果出现错误: Value cannot be found.使用以下命令:

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

(* 资料来源: 角度 CLI SASS 选项)

  1. 将现有的 .css文件重命名为 .scss(即 styles.css 和 app/app.Component. css)

  2. 指向 CLI 查找 styles.scss

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

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

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

为了未来的计划

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

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

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

ng config --global defaults.styleExt=scss
小开

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

手动更改 .angular.json:

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

用于角度 CLI 的 CSS 预处理器集成: 6.0.3

在生成新项目时，还可以为样式文件定义所需的扩展:

ng new sassy-project --style=sass

或者设置现有项目的默认样式:

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

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

小开

打开 Angular Json文件

1. 从

"schematics": {}

到

"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
  1. 从(两个地方)改变

"src/styles.css"

到

"src/styles.scss"

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

小开

角度6,

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

注意:@schema/angle 是 Angular CLI 的默认示意图

小开

在 ng6中，你需要使用这个命令，根据类似的 邮寄:

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

使用命令:

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

对于遇到这个线程的 接发用户: 所有命令都被 Nx (例如 ng generate component myCompent)拦截，然后传递给 AngularCLI。

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

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

小开

可以使用蛮力改变。 这将有助于改变，但这是一个更长的过程。

转到应用程序文件夹 Src/app

  1. 打开此文件: 应用程序组件

  2. 将代码 styleUrls: ['./app.component.css']更改为 styleUrls: ['./app.component.scss']

  3. 保存并关闭。

在同一文件夹 Src/app中

  1. 将 app.Component ent.css 文件的扩展名重命名为 (app.Component. scss)

  2. 所有其他组件都遵循这个变化。(例如: 家庭、约会、联系等等)

接下来是 Angular Json配置文件。它位于项目根目录下。

  1. 搜索和替换 css 将其更改为 (scss)。

  2. 保存并关闭。

最后，重新启动你的 ng serve -o。

如果编译器向你抱怨，再复习一遍步骤。

请确保严格按照 App/src中的步骤操作。

小开

现有项目 :

在 angular.json文件中

  1. 在 build部分和 test部分，替换:

    "styles": ["src/styles.css"], by "styles": ["src/styles.scss"],

  2. 更换:

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

使用 < code > ng config schematics.@ schema/angle: Component. styleext 命令可以工作，但是它没有将配置放在 老地方。

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

对于一个新项目 ，这个命令完成所有的工作:

ng n project-name --style=scss

用于全局配置

新版本似乎没有全局命令

小开

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

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

可以使用以下命令添加:

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

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

ng add schematics-scss-migrate

Https://github.com/teebo/scss-migrate#readme

小开

项目中的首次安装:

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

在你的角度 CLI 项目中:

运行以下命令:

ng g schematics-scss-migrate:scss-migrate

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

  1. 递归地重命名 Src文件夹中的所有样式表。
  2. 修改各个组件类中的 StyleUrls以指向样式表的新文件名。
  3. 更新 Angular Json文件中的组件样式示意图值，或者如果示意图不存在则创建一个示意图值，并且
  4. 在 Angular Json文件中将所有 Stylescss引用重命名为 风格。

我已经尝试了我的角9项目和它的工作... 不需要额外的努力重命名文件... 只需输入命令和轰! ! ！现在您的项目迁移到了 scss 项目。

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

小开

角度11 +

在 angular.json.中手动更换

更换 "schematics": {},

和

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

显然有不止一种方法可以做到这一点，但与最近的版本的角，我得到了另一个示意图的价值，我想保留。由于另一个值，命令 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和
  • 将文件中的所有引用更改为。

你应该完成这些步骤了。

小开

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

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

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

小开

角度版本12 只需将 styles.css 文件重命名为 styles.scss 并将 angular.json src/styles.css 更新为 src/styles.scss 即可


提交答案