less - 如何在 Angular 2 中使用 Less？

Question

我想知道如何将更少的编译添加到我的 Angular 2 项目中。因为每个组件都有自己的 .css 文件(现在将成为 .less 文件)，所以我不确定如何将文件编译为 css。

我也用谷歌搜索了这个问题，但没有找到解决我的问题的方法。

编辑 为了让我的问题更清楚: 我希望每个组件都有一个 .less ，就像 Angular 2 中 .css 文件的默认设置一样。我只想要每个 .less 进行预编译，并且因为在 Angular 处理组件后 Angular 将 css 作为内联脚本包括在内，我想我需要一些较少预处理的脚本，它是否存在？

我宁愿没有一个大的 .less 文件包含手册，用于整个项目，这当然是一个可能的解决方案。这个解决方案似乎不符合 Angular 环境......

Answer 1

新项目

您可以使用 --style 标志来设置 CSS 预处理器

ng new my-app --style less

现有项目

1. 如果你有一个现有的项目，那么你可以编辑 .angular-cli.json 文件并将 defaults.styleExt 值设置为 less .或者你可以简单地使用:ng set defaults.styleExt less
2. 重命名组件的 CSS 文件 mycomp/mycomp.component.css -> mycomp/mycomp.component.less
3. 更新 mycomp/mycomp.component.ts 中的 styleUrls，例如styleUrls: ['./mycomp.component.css'] -> styleUrls: ['./mycomp.component.less']

Resource