Angular CLI SASS选项

我是Angular的新手，来自Ember社区。尝试使用新的基于Ember-CLI的Angular-CLI。

我需要知道在一个新的Angular项目中处理SASS的最佳方法。我尝试使用Ember-CLI -sass回购，看看它是否能正常运行，因为Angular-CLI的许多核心组件都是在Ember-CLI模块上运行的。

它没有工作，但比再次不确定，如果我只是配置错误的东西。

另外，在新的Angular项目中组织样式的最佳方法是什么?如果能将sass文件与组件放在同一个文件夹中就太好了。

当前回答

博士TL; 注意:在Angular 9及以后的版本中，styleext被重命名为style Angular 9 & 9+在创建一个新项目时对于现有的: ng图表.@schematics /角:组件。scss风格对于Angular 2 - Angular 8: 对于一个现有的项目:ng config schematics.@schematics/angular:component。styleext scss

详细的回答

Angular 9 & 9+:

通过Angular CLI

ng config schematics.@schematics/angular:component.style scss

直接在angular.json中:

"schematics": {
   "@schematics/angular:component": {
   "style": "scss"
   }
}

对于旧版本

通过Angular CLI:

ng config schematics.@schematics/angular:component.styleext scss

直接在angular.json中:

注意:查找angular-cli。Json版本大于6。对于版本6和6+，该文件已被重命名为angular.json

"schematics": {
   "@schematics/angular:component": {
   "styleext": "scss"
   }
 }

注:原来的SO答案可以在这里找到

2018-06-01 10:19:16

其他回答

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

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

ng set --global defaults.styleExt scss

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

ng new some_project_name --style=scss

2017-03-02 11:19:32

设置为全局默认值

Ng设置默认值。styleExt = scss——全球

2018-02-12 11:00:45

详细的回答

Angular 9 & 9+:

通过Angular CLI

ng config schematics.@schematics/angular:component.style scss

直接在angular.json中:

"schematics": {
   "@schematics/angular:component": {
   "style": "scss"
   }
}

对于旧版本

通过Angular CLI:

ng config schematics.@schematics/angular:component.styleext scss

直接在angular.json中:

注意:查找angular-cli。Json版本大于6。对于版本6和6+，该文件已被重命名为angular.json

"schematics": {
   "@schematics/angular:component": {
   "styleext": "scss"
   }
 }

注:原来的SO答案可以在这里找到

2018-06-01 10:19:16

对于Angular 12，更新Angular。json:

"schematics": {
   "@schematics/angular:component": {
      "style": "scss"
    }
  }

and:

"build": {
  "options": {
    ...
    "inlineStyleLanguage": "scss"
  }
}

"test": {
  "options": {
    ...
    "inlineStyleLanguage": "scss"
  }
}

2021-06-16 10:31:20

就像Mertcan说的，使用scss的最好方法是创建带有该选项的项目:

ng new My_New_Project --style=scss

Angular-cli还添加了一个选项，可以在项目创建后使用以下命令更改默认的css预处理器:

ng set defaults.styleExt scss

要了解更多信息，你可以在这里查看他们的文档:

https://github.com/angular/angular-cli

2016-11-17 16:22:42

Angular CLI SASS选项

推荐文章

最新文章

标签