如何在Angular 2中使用Less？

Question

我想知道如何为Angular 2项目添加更少的编译.因为每个组件都有自己的.css文件(现在它将是.less文件)我不知道如何将文件编译为css ...

我也搜索了这个问题而没有找到解决问题的办法.

编辑为了使我的问题更清楚:我希望每个组件都有一个.less,就像它在Angular 2中的.css文件一样默认.我只想要每个.less都要预编译,因为Angular包括在Angular处理组件之后,css作为内联脚本,我想我之间需要一些较少的预处理脚本,它是否存在？

对于整个项目,我宁愿没有一个大的.less文件包含手册,这当然是一个可能的解决方案.这个解决方案似乎不符合Angular环境,但......

Answer 1

新项目

您可以使用该--style标志来设置CSS预处理器

ng new my-app --style less

现有项目

1. 如果您有现有项目,则可以编辑.angular-cli.json文件并将defaults.styleExt值设置为less.或者您可以使用简单地使用:ng set defaults.styleExt less
2. 从mycomp/mycomp.component.css- > 重命名组件的CSS文件mycomp/mycomp.component.less
3. 更新styleUrls的mycomp/mycomp.component.ts,比如styleUrls: ['./mycomp.component.css']- >styleUrls: ['./mycomp.component.less']

资源

Answer 2

如果您要创建一个新应用程序,请在添加应用程序名称之后--style选择您的预处理程序.

ng new my-first-app --style less

angular cli'new'命令的所有选项

Answer 3

LESS(或SASS)是CSS预处理器,因此您需要将它们基本上编译为CSS.一种非常流行的方法是使用基于Grunt,Gulp,Brunch或Broccoli的JavaScript任务运行器.

这是一个直接来自Broccoli入门页面的例子.

1. 安装节点 npm install -g broccoli-cli
2. 在项目目录root中,安装Broccoli npm install --save-dev broccoli
3. 安装Broccoli SASS并合并树(捆绑)插件 npm install --save-dev broccoli-sass broccoli-merge-trees
4. 创建/编辑Brocfile.js文件
5. 建立你的资产 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