我是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": {
    ...
  }
},

其他回答

Angular CLI版本9(用于创建Angular 9项目)现在从schematics中获取style,而不是styleext。使用如下命令: Ng config schematics.@schematics/angular:组件。样式scsand和生成的角。Json应该是这样的 “图表”:{ “@schematics /角:组件":{ “风格”:“scss” } }

其他可能的解决方案和解释: 用angular CLI创建一个支持sass的新项目,试试这个:

ng new My_New_Project --style=scss 

你也可以使用——style=sass &如果你不知道区别,阅读这篇简短的文章,如果你仍然不知道,就使用scss并继续学习。

如果你有一个angular 5的项目,使用这个命令来更新项目的配置。

ng set defaults.styleExt scss

最新版本

Angular 6使用CLI为现有项目设置新样式:

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

或者直接导入angular.json:

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

我注意到在移动到scss文件时一个非常烦人的陷阱!!在app.component.ts中,必须从简单的:styleUrls: [' app.ponent .scss']转移到styleUrls: ['./ app.ponent .scss'] (add ./)

ng在生成新项目时这样做,但在创建默认项目时似乎不这样做。如果在ng构建过程中看到resolve错误,请检查此问题。我只花了1个小时。

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

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

ng set --global defaults.styleExt scss

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

ng new some_project_name --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"}'

下面的代码应该在angular CLI 6项目中工作。例如,如果你得到:

Get /set已弃用,改用config命令。

npm install node-sass --save-dev

然后(确保您更改了项目名称)

ng config projects.YourPorjectName.schematics.@schematics/angular:component.styleext sass

要获得默认项目名,请使用:

ng config defaultProject

然而: 如果你把你的项目从<6迁移到angular 6,很有可能配置不会在那里。在这种情况下,你可能会得到:

无效的JSON字符:“s”在0:0

因此需要手动编辑angular。Json是必需的。

你会希望它看起来像这样(注意styleex属性):

...
"projects": {
    "Sassy": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {
        "@schematics/angular:component": {
          "styleext": "scss"
        }
      }
...

对我来说,这似乎是一个过于复杂的模式。¯_()_/¯

你现在必须去改变你所有的css/less文件为scss和更新组件等任何引用,但你应该很好去。