我是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

步骤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

截至2019年3月10日,安圭尔放弃了对萨斯的支持。不管你在运行ng new时传递给——style什么选项,你总是会生成.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": {
    ...
  }
},

告诉angular-cli默认总是使用scss

为了避免每次生成项目时都传递——style scss,你可能想要全局调整angular-cli的默认配置,使用以下命令:

ng set --global defaults.styleExt scss

请注意,某些版本的angular-cli包含读取上述全局标志的错误(见链接)。如果你的版本包含这个错误,生成你的项目:

ng new some_project_name --style=scss