如何使用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文件

/* 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 是一个JavaScript 框架。它可通过 注:建议把脚本放在 元素的底部。这会提高网页加载速度,因...
angluarjs中页面初始化的时候会出现语法{{}}在页面中问题,也即是页面闪烁问题。出现这个的原因是:由于...
AngularJS 通过被称为指令的新属性来扩展 HTML。AngularJS 指令AngularJS 指令是扩展的 HTML 属性,带有...
AngularJS 使用表达式把数据绑定到 HTML。AngularJS 表达式AngularJS 表达式写在双大括号内:{{ expres...
ng-repeat 指令可以完美的显示表格。在表格中显示数据 {{ x.Name }} {{ x.Country }} 使用 CSS 样式为了...
$http是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。读取 JSON 文件下是存储在web服务器上...