如何使用Less与Angular 2?

前端之家收集整理的这篇文章主要介绍了如何使用Less与Angular 2?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道如何可以将更少的编译添加到我的Angular 2项目中.因为每个组件都有自己的.css文件(现在将是一个.less文件),我不知道如何使文件编译成css …

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

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

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

LESS(或SASS)是CSS预处理器,因此您需要将其基本上编译成CSS.非常受欢迎的方法是使用基于 Grunt,Gulp,BrunchBroccoli的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文件

@H_403_23@/* 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

猜你在找的Angularjs相关文章