如何让Angular CLI生成*.less文件

Question

当我使用 Angular 5 CLI 来生成新组件时（例如 ng g c my-component），它将创建4个文件（html、css、ts、spec.ts）。我更希望为该组件也（或仅）创建一个 *.less 文件。我不确定 Angular 存储文件列表或用于生成新文件的模板的位置。我是否可以添加自己的文件类型以由 CLI 生成？

- Todd Davis

Answer 1

有几件事情可以让这个实现。

首先，当您创建一个新项目时，请使用--style选项将默认样式格式设置为less。

ng new new-app --style=less

这样一来，当您创建新的组件时，所创建的默认样式格式文件将会更少（.less文件）。

其次，如果您有一个现有的应用程序，您可以在 .angular-cli.json 文件中更改默认设置。为此，请找到文件中的 defaults 部分，并将 styleExt 的值更改为 less。请参见以下内容。

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

就是这样了！

- R. Richards

Answer 2

对于Angular 8，请在您的angular.json中使用以下设置

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

例子：

 "YOURAppName": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "less"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",

- Prasool

Answer 3

对于Angular 9及以上版本，请使用“style”代替（“styleext”或“styleExt”）

在angular.json中：

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

- Xambey

---

我们刚升级到 Angular 9，现在 CLI 生成的是 CSS 文件而不是 LESS 文件。这个答案解决了这个问题。 - piccy

Answer 4

针对 Angular 8：

在 angular.json 文件中：

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

- YairTawil