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版本6，此版本已更改。现在，在生成新项目类型时：

ng new sassy-project --style=scss

要在angular.json文件中更改使用angular cli version 6+生成的现有项目，您可以将项目[projectName] .schematics对象更新为：

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

Answer 3

Angular cli正在根据他的配置捆绑您的项目。

因此，为了使用css预处理器，你还应该告诉angular cli这样做。

angular-cli.json（或自测试版33 .angular-cli.json）后的更改：

{
  ...

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

要

{
  ...

  "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文件中手动更改它。 See Braden's answer

请注意，这些命令直接来自this source

如何改变“风格”。 Angular 2项目中的文件扩展名？

4 个答案: