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 scssCli处理其余的工作。对于最新版本为了使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": {&nbsp; &nbsp; "@schematics/angular:component": {&nbsp; &nbsp; &nbsp; &nbsp; "styleext": "scss"&nbsp; &nbsp; }}&nbsp;在哪里styleext可以是scss或sass根据选择。原始答案（针对Angular <6）新项目对于新项目，我们可以设置选项--style=sass或--style=scss根据所需的口味SASS / SCSS使用SASS语法ng new project --style=sass&nbsp;使用SCSS语法ng new project --style=scss&nbsp;然后安装node-sass，npm install node-sass --save-dev更新现有项目要使用angular-cli来编译sass文件node-sass，我必须运行，npm install node-sass --save-dev&nbsp;安装node-sass。然后用于SASS语法ng set defaults.styleExt sass用于SCSS语法ng set defaults.styleExt scss将默认的styleExt设置为sass（要么）改变styleExt到sass或scss为期望的语法中.angular-cli.json，用于SASS语法"defaults": {&nbsp; &nbsp; &nbsp;"styleExt": "sass",}用于SCSS语法"defaults": {&nbsp; &nbsp; &nbsp;"styleExt": "scss",}尽管它生成了编译器错误。ERROR in multi stylesModule not found: Error: Can't resolve '/home/user/projects/project/src/styles.css' in '/home/user/projects/project'&nbsp;@ multi styles&nbsp;通过更改.angular-cli.json，"styles": [&nbsp; &nbsp; &nbsp; &nbsp; "styles.css"&nbsp; &nbsp; &nbsp; ],要么用于SASS语法"styles": [&nbsp; &nbsp; &nbsp; &nbsp; "styles.sass"&nbsp; &nbsp; &nbsp; ],用于SCSS语法"styles": [&nbsp; &nbsp; &nbsp; &nbsp; "styles.scss"&nbsp; &nbsp; &nbsp; ],