我是Angular的新手,来自Ember社区。尝试使用新的基于Ember-CLI的Angular-CLI。
我需要知道在一个新的Angular项目中处理SASS的最佳方法。我尝试使用Ember-CLI -sass回购,看看它是否能正常运行,因为Angular-CLI的许多核心组件都是在Ember-CLI模块上运行的。
它没有工作,但比再次不确定,如果我只是配置错误的东西。
另外,在新的Angular项目中组织样式的最佳方法是什么?如果能将sass文件与组件放在同一个文件夹中就太好了。
我是Angular的新手,来自Ember社区。尝试使用新的基于Ember-CLI的Angular-CLI。
我需要知道在一个新的Angular项目中处理SASS的最佳方法。我尝试使用Ember-CLI -sass回购,看看它是否能正常运行,因为Angular-CLI的许多核心组件都是在Ember-CLI模块上运行的。
它没有工作,但比再次不确定,如果我只是配置错误的东西。
另外,在新的Angular项目中组织样式的最佳方法是什么?如果能将sass文件与组件放在同一个文件夹中就太好了。
当前回答
针对Angular 6+的更新
新项目
当用Angular CLI生成一个新项目时,将css预处理器指定为
使用SCSS语法 Ng新的ssy-project——style=scss 使用SASS语法 Ng新的时髦项目——style=sass
更新现有项目
通过运行在现有项目上设置默认样式
使用SCSS语法 Ng config schematics.@schematics/angular:组件。styleext scss 使用SASS语法 Ng config schematics.@schematics/angular:组件。styleext sass 上面的命令将更新你的工作空间文件(angular.json) “图表”:{ “@schematics /角:组件":{ :“styleext scss” } }
其中styleext可以是SCSS或sass根据选择。
其他回答
我注意到在移动到scss文件时一个非常烦人的陷阱!!在app.component.ts中,必须从简单的:styleUrls: [' app.ponent .scss']转移到styleUrls: ['./ app.ponent .scss'] (add ./)
ng在生成新项目时这样做,但在创建默认项目时似乎不这样做。如果在ng构建过程中看到resolve错误,请检查此问题。我只花了1个小时。
针对Angular 6+的更新
新项目
当用Angular CLI生成一个新项目时,将css预处理器指定为
使用SCSS语法 Ng新的ssy-project——style=scss 使用SASS语法 Ng新的时髦项目——style=sass
更新现有项目
通过运行在现有项目上设置默认样式
使用SCSS语法 Ng config schematics.@schematics/angular:组件。styleext scss 使用SASS语法 Ng config schematics.@schematics/angular:组件。styleext sass 上面的命令将更新你的工作空间文件(angular.json) “图表”:{ “@schematics /角:组件":{ :“styleext scss” } }
其中styleext可以是SCSS或sass根据选择。
对于Angular 9.0及更新版本,更新Angular中的"schematics":{}对象。像这样的Json文件:
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
// Angular 13 may contain this as well; NOT related
"@schematics/angular:application": {
...
}
},
就像Mertcan说的,使用scss的最好方法是创建带有该选项的项目:
ng new My_New_Project --style=scss
Angular-cli还添加了一个选项,可以在项目创建后使用以下命令更改默认的css预处理器:
ng set defaults.styleExt scss
要了解更多信息,你可以在这里查看他们的文档:
https://github.com/angular/angular-cli
Angular- cli是推荐的方法,也是Angular 2+社区的标准。
克里特岛与SCSS的新项目
ng new My-New-Project——style=sass
转换现有项目(CLI小于v6)
Ng设置默认值。styleExt scss
(必须手动重命名所有的。css文件,不要忘记重命名你的组件文件)
转换现有项目(CLI大于v6)
将所有CSS文件重命名为SCSS,并更新引用它们的组件。 将以下内容添加到angular的“schematics”键中。Json(通常是第11行):
“@schematics /角:组件":{ “styleext”:“萨斯” }