1. 首页
  2. 问题
  3. 从 css 到 scss 的 Angular-cli
小编典典

从 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'(鈥�)

阅读 102

收藏
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