从 css 到 scss 的 Angular-cli

Angular-cli from css to scss

提问by Jamie

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

我已经阅读了文档，它说如果我想使用scss我必须运行以下命令：

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'(…)

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

回答by Chic

For Angular 6check the Official documentation

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

Note:For @angular/cliversions older than 6.0.0-beta.6use ng setin place of ng config.

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

For existing projects

对于现有项目

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

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

1. Change the default style extension to scss

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

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

ng config defaults.styleExt=scss

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

ng config defaults.styleExt=scss

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

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

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

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

(*source: Angular CLI SASS options)

（*来源：Angular CLI SASS 选项）

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

2. Point the CLI to find styles.scss

2. 将现有.css文件重命名为.scss（即styles.css 和app/app.component.css）

3. 指向 CLI 以查找 style.scss

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

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

1. Point the components to find your new style files

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

Change the styleUrlsin your components to match your new file names

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

For future projects

对于未来的项目

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

正如@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

回答by Jose Orihuela

As of ng6 this can be accomplished with the following code added to angular.jsonat the root level:

从 ng6 开始，这可以通过angular.json在根级别添加以下代码来完成：

Manually change in .angular.json:

手动更改.angular.json：

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

回答by BALA

Open angular.jsonfile

打开angular.json文件

1.change from

1.从

"schematics": {}

"schematics": {}

to

到

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

1. change from (at two places)

2. 从（在两个地方）改变

"src/styles.css"

"src/styles.css"

to

到

"src/styles.scss"

"src/styles.scss"

then check and rename all .cssfiles and update component.ts files styleUrls from .css to .scss

然后检查并重命名所有.css文件并更新 component.ts 文件中的 styleUrls.css to .scss

回答by Franklin Pious

For Angular 6,

对于 Angular 6，

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

note: @schematics/angular is the default schematic for the Angular CLI

注意：@schematics/angular 是 Angular CLI 的默认原理图

回答by Angel Roma

CSS Preprocessor integration for Angular CLI: 6.0.3

Angular CLI 的 CSS 预处理器集成：6.0.3

When generating a new project you can also define which extension you want for style files:

生成新项目时，您还可以定义样式文件所需的扩展名：

ng new sassy-project --style=sass

Or set the default style on an existing project:

或者在现有项目上设置默认样式：

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

Angular CLI Documentation for all major CSS preprocessors

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

回答by veben

For existing projects:

对于现有项目：

In angular.jsonfile

在angular.json文件中

1. In buildpart and in testpart, replace:

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

2. Replace:

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

1. 在build部分和test部分取代：

   "styles": ["src/styles.css"],经过 "styles": ["src/styles.scss"],

2. 代替：

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

Using ng config schematics.@schematics/angular:component.styleext scsscommand works but it does not place the configuration in the same place.

使用ng config schematics.@schematics/angular:component.styleext scss命令有效，但它不会将配置放在同一个地方。

In your projectrename your .cssfiles to .scss

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

For a new project, this command do all the work:

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

ng n project-name --style=scss

For global configuration

用于全局配置

New versions seems to not have a global command

新版本好像没有全局命令

回答by himanshu sharma

Use command:

使用命令：

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

回答by tilo

For users of the Nrwl extensionswho come across this thread: all commands are intercepted by Nx (e.g., ng generate component myCompent) and then passed down to the AngularCLI.

对于遇到此线程的Nrwl 扩展用户：所有命令都被 Nx（例如，ng generate component myCompent）拦截，然后传递给 AngularCLI。

The command to get SCSS working in an Nx workspace:

使 SCSS 在 Nx 工作区中工作的命令：

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

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

回答by Jameson Saunders

In ng6 you need to use this command, according to a similar post:

根据类似的帖子，在 ng6 中您需要使用此命令：

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

回答by Frank Thoeny

A brute force change can be applied.This will work to change, but it's a longer process.

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

Go to the app folder src/app

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

1. Open this file: app.component.ts

2. Change this code styleUrls: ['./app.component.css']to styleUrls: ['./app.component.scss']

3. Save and close.

1. 打开这个文件：app.component.ts

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

3. 保存并关闭。

In the same folder src/app

在同一个文件夹中src/app

1. Rename the extension for the app.component.css file to (app.component.scss)

2. Follow this change for all the other components. (ex. home, about, contact, etc...)

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

2. 对所有其他组件遵循此更改。（例如，家、关于、联系方式等...）

The angular.jsonconfiguration file is next. It's located at the project root.

接下来是angular.json配置文件。它位于项目根目录。

1. Search and Replace the css change it to (scss).

2. Save and close.

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

2. 保存并关闭。

Lastly, Restart your ng serve -o.

最后，重启你的ng serve -o.

If the compiler complains at you, go over the steps again.

如果编译器向您抱怨，请再次查看这些步骤。

Make sure to follow the steps in app/srcclosely.

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