Angular-cli:将 less 文件编译为全局 css

Question

我已将我的应用设置为使用 less。我可以为我的组件使用 less 文件。但是，我需要将一个 less 文件编译为全局 css 以包含在根索引.html 中。

我读到最新的 angular-cli 版本(我正在使用 "angular-cli": "1.0.0-beta.19-3",)使用了 webpack，但我找不到有关如何实现的文档，或添加此指令的 webpack 文件。

如何设置我的 angular-cli 应用程序来编译要全局使用的 less 文件？

Answer 1

将 less 文件添加到 angular-cli.json 中的 apps[0].styles 中。例如

"apps": [
  {
    "styles": [
      "main.less"
    ]
  }

然后它将自动包含在您的 bundle 中。您可以照常从 main.less 导入/引用其他 less 文件，并且可以向 apps[0].styles 添加任意数量的条目。

您也可以在此处添加来自 vendor 的样式(例如 node_modules 中的包)。

angular-cli.json 中的路径相对于 src 目录。