我是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 9.0及更新版本,更新Angular中的"schematics":{}对象。像这样的Json文件:
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
// Angular 13 may contain this as well; NOT related
"@schematics/angular:application": {
...
}
},
其他回答
引用自官方github回购这里-
以安装为例 NPM安装node-sass 将项目中的.css文件重命名为.scss或.sass。它们将被自动编译。 Angular2App的options参数有sassCompiler、lessCompiler、stylusCompiler和compassCompiler选项,它们直接传递给各自的CSS预处理器。
在这里看到的
https://github.com/angular/angular-cli/wiki/stories-css-preprocessors
对于Angular 12,更新Angular。json:
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
}
and:
"build": {
"options": {
...
"inlineStyleLanguage": "scss"
}
}
"test": {
"options": {
...
"inlineStyleLanguage": "scss"
}
}
步骤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
就像Mertcan说的,使用scss的最好方法是创建带有该选项的项目:
ng new My_New_Project --style=scss
Angular-cli还添加了一个选项,可以在项目创建后使用以下命令更改默认的css预处理器:
ng set defaults.styleExt scss
要了解更多信息,你可以在这里查看他们的文档:
https://github.com/angular/angular-cli
对于Angular 9.0及更新版本,更新Angular中的"schematics":{}对象。像这样的Json文件:
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
// Angular 13 may contain this as well; NOT related
"@schematics/angular:application": {
...
}
},