我想知道如何在我的 Angular 2 项目中减少编译。因为每个组件都有自己的 .css 文件（现在将是 .less 文件），所以我不确定如何将文件编译为 css。
我也用谷歌搜索了这个问题，但没有找到任何解决我的问题的方法。
EDIT
为了让我的问题更清楚：
我希望每个组件都有一个.less，就像Angular 2中.css文件的默认设置一样。我只希望每个.less都被预编译，因为Angular将css作为内联脚本包含在内在组件被Angular处理后，我想我需要一些较少的预处理脚本，它存在吗？
我宁愿没有一个大的 .less 文件包含手册，用于整个项目，这当然是一个可能的解决方案。不过，这个解决方案似乎不符合 Angular 环境...
【问题讨论】：
新项目
您可以使用 --style 标志来设置 CSS 预处理器
ng new my-app --style less
现有项目
.angular-cli.json 文件并将defaults.styleExt 值设置为less。或者您可以简单地使用：ng set defaults.styleExt less
mycomp/mycomp.component.css -> mycomp/mycomp.component.less
mycomp/mycomp.component.ts 中更新styleUrls，例如styleUrls: ['./mycomp.component.css'] -> styleUrls: ['./mycomp.component.less']
【讨论】：
如果您要创建新应用，请在应用名称后添加 --style 以选择您的预处理器。
ng new my-first-app --style less
【讨论】：
LESS（或 SASS）是 CSS 预处理器，因此您需要将它们本质上编译成 CSS。一种非常流行的方法是使用基于 Grunt、Gulp、Brunch 或 Broccoli 的 JavaScript 任务运行程序。
这是直接取自 Broccoli 入门页面的 example。
npm install -g broccoli-cli
npm install --save-dev broccoli
npm install --save-dev broccoli-sass broccoli-merge-trees
broccoli build dist
Brocfile.js 文件示例
/* Brocfile.js */
// Import some Broccoli plugins
var compileSass = require('broccoli-sass');
var mergeTrees = require('broccoli-merge-trees');
// Specify the Sass and Coffeescript directories
var sassDir = 'app/scss';
// Tell Broccoli how we want the assets to be compiled
var styles = compileSass([sassDir], 'app.scss', 'app.css');
// Merge the compiled styles and scripts into one output directory.
module.exports = mergeTrees([styles, scripts]);enter code here
顺便说一句：您可以轻松地将 SASS 切换为 LESS
【讨论】：
您仍然可以使用单个.css，其中包含所有组件的所有样式规则，并在每个组件中导入相同的.css 文件（您必须使用选择器/标签名称而不是:host {）。浏览器无论如何都会缓存文件，因此它只会下载一次。
但是，小范围 .css 文件的优势已经丧失。
我不知道 Less，但是对于 SASS，我目前正在开发一个自定义导入器，其中导入路径可以以 id/name 为前缀，并且自定义导入器在本地检查是否定义了该 id/name 的覆盖并且而是返回此值，否则导入将回退到默认值。
这样，组件的创建者可以提供覆盖钩子，用户可以在其中传递它自己的变量、mixin 等，而不是在构建时传递默认值。
【讨论】：