我是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- 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”:“萨斯” }
其他回答
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”:“萨斯” }
Angular CLI版本9(用于创建Angular 9项目)现在从schematics中获取style,而不是styleext。使用如下命令: Ng config schematics.@schematics/angular:组件。样式scsand和生成的角。Json应该是这样的 “图表”:{ “@schematics /角:组件":{ “风格”:“scss” } }
其他可能的解决方案和解释: 用angular CLI创建一个支持sass的新项目,试试这个:
ng new My_New_Project --style=scss
你也可以使用——style=sass &如果你不知道区别,阅读这篇简短的文章,如果你仍然不知道,就使用scss并继续学习。
如果你有一个angular 5的项目,使用这个命令来更新项目的配置。
ng set defaults.styleExt scss
最新版本
Angular 6使用CLI为现有项目设置新样式:
ng config schematics.@schematics/angular:component.styleext scss
或者直接导入angular.json:
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
博士TL; 注意:在Angular 9及以后的版本中,styleext被重命名为style Angular 9 & 9+在创建一个新项目时 对于现有的: ng图表.@schematics /角:组件。scss风格 对于Angular 2 - Angular 8: 对于一个现有的项目:ng config schematics.@schematics/angular:component。styleext scss
详细的回答
Angular 9 & 9+:
通过Angular CLI
ng config schematics.@schematics/angular:component.style scss
直接在angular.json中:
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
}
对于旧版本
通过Angular CLI:
ng config schematics.@schematics/angular:component.styleext scss
直接在angular.json中:
注意:查找angular-cli。Json版本大于6。对于版本6和6+,该文件已被重命名为angular.json
"schematics": {
"@schematics/angular:component": {
"styleext": "scss"
}
}
注:原来的SO答案可以在这里找到
对于Angular 12,更新Angular。json:
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
}
and:
"build": {
"options": {
...
"inlineStyleLanguage": "scss"
}
}
"test": {
"options": {
...
"inlineStyleLanguage": "scss"
}
}
对于Angular 9.0及更新版本,更新Angular中的"schematics":{}对象。像这样的Json文件:
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
// Angular 13 may contain this as well; NOT related
"@schematics/angular:application": {
...
}
},