小编典典

从 css 到 scss 的 Angular-cli

all

我已阅读文档,其中说如果我想使用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'(鈥�)

阅读 104

收藏
2022-08-02

共1个答案

小编典典

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

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

对于现有项目

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

  1. 将默认样式扩展更改为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

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

  2. 指向 CLI 以查找 styles.scss

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

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

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

对于未来的项目

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

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

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

ng config --global defaults.styleExt=scss
2022-08-02