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

问题描述

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

ng set defaults.styleExt scss

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

<块引用>

styles.bundle.js:33Uncaught 错误:模块构建失败:错误:ENOENT:没有这样的文件或目录，打开'/Users/Egen/Code/angular/src/styles.css'(…)

解决方案

对于 Angular 6 检查 官方文档

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

对于现有项目

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

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

<块引用>

手动更改 .angular-cli.json(Angular 5.x 及更早版本)或 angular.json(Angular 6+)或运行:

ng config defaults.styleExt=scss

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

<块引用>

ng 配置原理图.@schematics/angular:component.styleext scss

(*来源:Angular CLI SASS 选项)

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

3. 指向 CLI 以查找 style.scss

<块引用>

手动更改angular.json

中apps[0].styles中的文件扩展名

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

<块引用>

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

对于未来的项目

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

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

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

ng config --global defaults.styleExt=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'(…)

解决方案

For Angular 6 check the Official documentation

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

For existing projects

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

1. Change the default style extension to scss

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

ng config defaults.styleExt=scss

if you get an error: Value cannot be found. use the command:

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

(*source: Angular CLI SASS options)

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

3. Point the CLI to find styles.scss

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

4. Point the components to find your new style files

Change the styleUrls in your components to match your new file names

For future projects

As @Serginho mentioned you can set the style extension when running the ng new command

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

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