如何使用Less与Angular 2？

我想知道如何可以将更少的编译添加到我的Angular 2项目中.因为每个组件都有自己的.css文件(现在将是一个.less文件),我不知道如何使文件编译成css …

我也没有找到任何解决问题的方式来解决这个问题.

编辑
让我的问题更清楚：
我希望对每个组件都有一个,就像在Angular 2中的.css文件一样.我只是希望每个组件都可以预编译,因为Angular在组件之后包含css作为内联脚本是由Angular处理的,我想我需要一些较少的预处理脚本,它是否存在？

对于整个项目来说,我宁可不要有一个没有大的文件的手册,这当然是一个可能的解决方案.这个解决方案似乎与Angular环境不一致

LESS(或SASS)是CSS预处理器,因此您需要将其基本上编译成CSS.非常受欢迎的方法是使用基于 Grunt,Gulp,Brunch或 Broccoli的JavaScript任务运行器.

这是一个 example直接从西兰花开始页面.

>安装节点npm install -g broccoli-cli
>在您的项目目录根目录下,安装broccoli npm install –save-dev broccoli
>安装西兰花SASS并合并树(捆绑)插件npm install –save-dev broccoli-sass broccoli-merge-trees
>创建/编辑brocfile.js文件
>建立你的资产西兰花建筑区

示例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

BTW：您可以轻松切换SASS的LESS

如何使用Less与Angular 2？

相关文章