我是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文件与组件放在同一个文件夹中就太好了。
当前回答
就像Mertcan说的,使用scss的最好方法是创建带有该选项的项目:
ng new My_New_Project --style=scss
Angular-cli还添加了一个选项,可以在项目创建后使用以下命令更改默认的css预处理器:
ng set defaults.styleExt scss
要了解更多信息,你可以在这里查看他们的文档:
https://github.com/angular/angular-cli
其他回答
设置为全局默认值
Ng设置默认值。styleExt = scss——全球
引用自官方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- 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 9.0及更新版本,更新Angular中的"schematics":{}对象。像这样的Json文件:
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
// Angular 13 may contain this as well; NOT related
"@schematics/angular:application": {
...
}
},
步骤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