我是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版本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"
}
}
其他回答
截至2019年3月10日,安圭尔放弃了对萨斯的支持。不管你在运行ng new时传递给——style什么选项,你总是会生成.scss文件。很遗憾,没有任何解释就取消了粗鲁的支持。
就像Mertcan说的,使用scss的最好方法是创建带有该选项的项目:
ng new My_New_Project --style=scss
Angular-cli还添加了一个选项,可以在项目创建后使用以下命令更改默认的css预处理器:
ng set defaults.styleExt scss
要了解更多信息,你可以在这里查看他们的文档:
https://github.com/angular/angular-cli
不要使用SASS或ANGULAR的嵌入式CSS系统!!
这一点我怎么强调都不为过。当你同时使用这两种技术时,Angular的人不理解基本的级联样式表系统——就像这个Angular。json设置-编译器将所有CSS放入Javascript模块,然后将它们作为嵌入式CSS输出到HTML页面的头部,破坏和混淆级联顺序,并禁用原生CSS导入级联。
出于这个原因,我建议你从“ANGULAR.”中删除所有的样式引用。,然后手动将它们添加回“index.html”中,就像这样:
<link href="styles/styles.css" rel="stylesheet" />
现在你有了一个功能齐全的级联CSS系统,它可以在多次刷新时完全缓存在你的浏览器中,无需ecmascript的杂技,节省大量带宽,增加静态文件中的CSS整体管理,并完全控制级联顺序,而不必像Angular尝试的那样将笨拙的嵌入CSS注入到所有web页面头部。
当您了解如何在基本CSS文件中管理级联时,甚至不需要使用SASS。对于那些使用少量链接的CSS文件学习级联顺序的人来说,具有复杂CSS的大型网站可以非常简单地管理。
步骤1。使用npm安装bulma包
npm install --save bulma
步骤2。开放的角。Json和更新以下代码
...
"styles": [
"node_modules/bulma/css/bulma.css",
"src/styles.scss"
],
...
就是这样。
为了方便地公开Bulma的工具,将stylePreprocessorOptions添加到angular.json中。
...
"styles": [
"src/styles.scss",
"node_modules/bulma/css/bulma.css"
],
"stylePreprocessorOptions": {
"includePaths": [
"node_modules",
"node_modules/bulma/sass/utilities"
]
},
...
查找 + 角度 6
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"
}
}