我是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文件与组件放在同一个文件夹中就太好了。
当前回答
步骤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 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": {
...
}
},
对于Angular 12,更新Angular。json:
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
}
and:
"build": {
"options": {
...
"inlineStyleLanguage": "scss"
}
}
"test": {
"options": {
...
"inlineStyleLanguage": "scss"
}
}
截至2019年3月10日,安圭尔放弃了对萨斯的支持。不管你在运行ng new时传递给——style什么选项,你总是会生成.scss文件。很遗憾,没有任何解释就取消了粗鲁的支持。
Ng set——全局默认值。styleExt=scss自ng6起已弃用。你会收到这样的信息:
Get /set已弃用,改用config命令
你应该使用:
ng config schematics.@schematics/angular:component '{ styleext: "scss"}'
如果你想要针对一个特定的项目(用你的项目名替换{project}):
ng config projects.{project}.schematics.@schematics/angular:component '{ styleext: "scss"}'