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

我想知道如何减少对Angular 2项目的编译。因为每个组件都有自己的.css文件(现在将是.less文件)，所以我不确定如何使该文件编译为CSS。
我也用Google搜索这个问题，但没有找到解决我问题的方法。EDIT让我的问题更清楚:
我希望每个组件都有一个.less，就像Angular 2中.css文件的默认设置一样。我只希望每个.less都经过预编译，并且由于Angular在组件被处理后包含css作为内联脚本。有角，我想我之间需要一些较少预处理的脚本，它存在吗？
对于整个项目，我宁愿没有一个包含大手册的.less文件，这当然是可能的解决方案。尽管此解决方案似乎与Angular环境不兼容...

最佳答案

LESS(或SASS)是CSS预处理程序，因此您实际上需要将它们编译为CSS。一种非常流行的方法是使用JavaScript任务运行程序，例如基于Grunt，Gulp，Brunch或Broccoli。

这是从Broccoli入门页面直接获取的example。

安装节点npm install -g broccoli-cli

在项目目录根目录中，安装Broccoli npm install --save-dev broccoli

安装Broccoli SASS并合并树( bundle )插件npm install --save-dev broccoli-sass broccoli-merge-trees

创建/编辑Brocfile.js文件

建立 Assets 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