Angular CLI SASS选项

Question

我是Angular的新手，我来自Ember社区。尝试使用基于Ember-CLI的新Angular-CLI。我需要知道在新的Angular项目中处理SASS的最佳方法。我尝试使用该存储ember-cli-sass库来查看它是否可以正常运行，因为Angular-CLI的许多核心组件都运行于Ember-CLI模块。它没有用，但是再不确定我是否配置错误。另外，在新的Angular项目中组织样式的最佳方法是什么？最好将sass文件与组件放在同一文件夹中。

Answer 1

当您使用angular cli创建项目时，请尝试以下操作：

ng new My_New_Project --style=sass 

这将生成带有预定义sass文件的所有组件。

如果要使用scss语法，请使用以下命令创建项目：

ng new My_New_Project --style=scss

如果要更改项目中的现有样式

ng set defaults.styleExt scss

Cli处理其余的工作。

对于最新版本

为了使Angular 6使用CLI在现有项目上设置新样式：

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

或直接进入angular.json：

"schematics": {

      "@schematics/angular:component": {

      "styleext": "scss"

    }

}

Answer 2

更新Angular 6+

新项目

当生成一个新的项目与角CLI，指定CSS预处理器

使用SCSS语法

ng new sassy-project --style=scss

使用SASS语法

ng new sassy-project --style=sass

更新现有项目

通过运行在现有项目上设置默认样式

使用SCSS语法

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

使用SASS语法

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

上面的命令将使用以下命令更新您的工作区文件（angular.json）

"schematics": {

    "@schematics/angular:component": {

        "styleext": "scss"

    }

} 

在哪里styleext可以是scss或sass根据选择。

原始答案（针对Angular <6）

新项目

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

使用SASS语法

ng new project --style=sass 

使用SCSS语法

ng new project --style=scss 

然后安装node-sass，

npm install node-sass --save-dev

更新现有项目

要使用angular-cli来编译sass文件node-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，

"styles": [

        "styles.css"

      ],

要么

用于SASS语法

"styles": [

        "styles.sass"

      ],

用于SCSS语法

"styles": [

        "styles.scss"

      ],