如何在 Angular 2 项目中更改"styles."文件扩展名？

Question

我创建了一个Angular 2项目，但我忘了使用.scss扩展名创建样式文件。我输入;

ng new my-project

而不是键入;

ng new my-project --style=scss

所以现在我的样式文件具有.css扩展名。如何以正确的方式将其更改为.scss？当我在文件夹中更改它时，我会发现一个错误。

Answer 1

使用Angular CLI使用：

ng set defaults.styleExt scss

Answer 2

Angular CLI版本已更改。现在生成新项目类型时：

ng new sassy-project --style=scss

要在Angular.json文件中使用Angular CLI版本6 更改现有的项目。

"projects": {
  "sassy-project: {
    ...
    "schematics": {
      "@schmatics/angular:component": {
        "styleext": "scss"
      }
    }
    ...
  }
}

Answer 3

Angular CLI根据其配置将您的项目捆绑。

因此，为了使用CSS预处理器，您还应该告诉Angular CLI。

angular-cli.json中的更改（或自Beta 33 .angular-cli.json）：

{
  ...
  "defaults": {
    "styleExt": "css",
    "component": {}
  }
}

to

{
  ...
  "defaults": {
    "styleExt": "sccs", (or whatever extension you want)
    "component": {}
  }
}

Answer 4

作为Angular 6 ，ng set命令已被弃用。
您需要改用ng config命令。这是使用ng config

更改为SCSS的方法

ng config defaults.styleExt=scss

如果您遇到了错误Value cannot be found，请尝试此命令。

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

您也可以在Angular.json文件中手动更改它。请参阅布雷登的答案

请注意，Thoses命令已直接从此来源