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

Question

我创建了一个 Angular 2 项目，但我忘记创建扩展名为 .scss 的样式文件。我输入了；

ng new my-project

而不是打字；

ng new my-project --style=scss

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

Answer 1

Angularcli正在按照他的配置打包你的项目

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

angular-cli.json 中的更改（或自 beta 33 .angular-cli.json 以来）：

{
  ...

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

到

{
  ...

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

Answer 2

要使用 Angular CLI 更新它，请使用：

ng set defaults.styleExt scss

Answer 3

这已针对 angular cli 版本 6 进行了更改。现在生成新项目类型时：

ng new sassy-project --style=scss

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

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

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 文件中手动更改它。

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

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

How to change "styles." file extension in Angular 2 project?

css

styles

angular-cli

angular