Angular CLI SASS选项

我是Angular的新手，我来自Ember社区。 尝试使用基于Ember-CLI的新的Angular-CLI。

我需要知道在新的Angular 2项目中处理SASS的最佳方法。 我尝试使用ember-cli-sass回购看看它是否会一起玩，因为Angular-CLI的许多核心组件都是从Ember-CLI模块运行的。

它没有工作，但再次不知道，如果我只是错误configuration的东西。

另外，在一个新的Angular 2项目中组织样式的最好方法是什么？ 我很高兴有sass文件与组件相同的文件夹。

当你用angular度cli创build你的项目时，试试这个： 

 ng new My_New_Project --style=sass

这生成所有组件与preifined sass文件。

如果你想scss语法创build你的项目： 

 ng new My_New_Project --style=scss

如果你正在改变你的项目现有的风格 

 ng set defaults.styleExt scss

Cli处理其余的部分。

新项目

对于新项目，我们可以根据所需的SASS / SCSS风格设置选项--style=sass或--style=scss

  • 使用SASS语法 

     ng new project --style=sass

  • 使用SCSS语法 

     ng new project --style=scss

然后安装node-sass ， 

 npm install node-sass --save-dev

更新现有的项目

为了让angular-cli用sass编译sass文件，我必须运行， 

 npm install node-sass --save-dev

它安装node-sass 。 然后

  • 对于SASS语法 

     ng set defaults.styleExt sass

  • 为SCSS语法 

     ng set defaults.styleExt scss

将默认的styleExt设置为sass

（要么）

将styleExt更改为sass或scss以获取.angular-cli.json所需语法，

  • 对于SASS语法 

     "defaults": { "styleExt": "sass", }

  • 为SCSS语法 

     "defaults": { "styleExt": "scss", }

虽然它会产生编译器错误。 

 ERROR in multi styles Module not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project' @ multi styles

这是通过改变.angular-cli.json的行来.angular-cli.json ， 

 "styles": [ "styles.css" ],

要么，

  • 对于SASS语法 

     "styles": [ "styles.sass" ],

  • 为SCSS语法 

     "styles": [ "styles.scss" ],

引用官方github回购在这里 –

例如使用一个只是安装

npm install node-sass

并将项目中的.css文件重命名为.scss或.sass。 他们将被自动编译。 Angular2App的选项参数有sassCompiler，lessCompiler，stylusCompiler和compassCompiler选项，直接传递给它们各自的CSS预处理器。

看这里

像Mertcan说的，使用scss的最好方法是使用该选项创build项目： 

 ng new My_New_Project --style=scss

Angular-cli还添加了一个选项，在使用以下命令创build项目后更改默认的css预处理器： 

 ng set defaults.styleExt scss

欲了解更多信息，你可以看看这里的文件：

https://github.com/angular/angular-cli

告诉angular度cli总是默认使用scss

为了避免每次生成项目时传递--style scss ，可能需要使用以下命令全局调整angular度cli的默认configuration： 

 ng set --global defaults.styleExt scss

请注意，有些版本的angular-cli包含读取上述全局标志的错误（ 请参阅链接 ）。 如果您的版本包含此错误，请使用以下命令生成项目： 

 ng new project --style=scss

我注意到移动到scss文件非常恼人的窍门！ 必须从一个简单的：

styleUrls: ['app.component.scss']

到一个

styleUrls: ['./app.component.scss']

当你生成一个新的项目时，ng会这样做，但是当默认的项目被创build的时候，不会看到。 如果在ng build期间看到解决错误，请检查此问题。 它只花了我〜1小时。

最好的可能是ng new myApp --style=scss

然后Angular CLI将为你创build任何新的组件scss …

请注意，使用scss在浏览器中不能正常工作，所以我们需要将其编译为css ，因此，我们可以使用node-sass ，像下面这样安装它： 

 npm install node-sass --save-dev

你应该很好走！

如果你使用webpack，请阅读这里：

命令行在您现有的package.json所在的项目文件夹中： npm install node-sass sass-loader raw-loader --save-dev

在webpack.common.js ，search“rules：”并将此对象添加到规则数组的末尾（不要忘记将逗号添加到前一个对象的末尾）： 

 { test: /\.scss$/, exclude: /node_modules/, loaders: ['raw-loader', 'sass-loader'] // sass-loader not scss-loader }

然后在你的组件中： 

 @Component({ styleUrls: ['./filename.scss'], })

如果您想要全局CSS支持，那么在顶层组件（可能是app.component.ts）上移除封装并包含SCSS： 

 import {ViewEncapsulation} from '@angular/core'; @Component({ selector: 'app', styleUrls: ['./bootstrap.scss'], encapsulation: ViewEncapsulation.None, template: `` }) class App {}

来自Angular starter 这里 。

Interesting Posts