Angular-cli从css到scss [英] Angular-cli from css to scss

问题描述

我已阅读文档，其中说明如果我想使用 scss 我必须运行以下命令：

I've read the documentation, which says that if I want to use scss I have to run the following command:

ng set defaults.styleExt scss

但是当我这样做并制作该文件时，我仍然在我的控制台中收到此错误：

But when I do that and make that file, I still receive this error in my console:

styles.bundle.js:33Uncaught Error: Module build failed: Error: ENOENT: no such file or directory, open '/Users/Egen/Code/angular/src/styles.css'(…)

如何解决此问题？

推荐答案

对于Angular 6 检查官方文档

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

Note: For @angular/cli versions older than 6.0.0-beta.6 use ng set in place of ng config.

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

In an existing angular-cli project that was set up with the default css styles you will need to do a few things:

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

1. Change the default style extension to scss

手动更改.angular-cli.json（Angular 5.x及更早版本）或angular。 json（Angular 6+）或运行：

Manually change in .angular-cli.json (Angular 5.x and older) or angular.json(Angular 6+) or run:

ng config defaults.styleExt=scss

1. 重命名现有的 .css 文件到 .scss （即styles.css和app / app.component.css）

1. Rename your existing .css files to .scss (i.e. styles.css and app/app.component.css)

指向CLI以查找styles.scss

Point the CLI to find styles.scss

以角度方式手动更改 apps [0] .styles 中的文件扩展名。 json

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

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

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

对于未来的项目

正如@Serginho所提到的，你可以设置风格运行 ng new 命令时的扩展名

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

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

If you want to set the default for all projects you create in the future run the following command:

ng config --global defaults.styleExt=scss

这篇关于Angular-cli从css到scss的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！