如何在Angular 2中使用Less? [英] How to use Less with Angular 2?

问题描述

我想知道如何减少对Angular 2项目的编译.因为每个组件都有自己的.css文件(现在将是.less文件)，所以我不确定如何使该文件编译为CSS ...

I would like to know how I can add less compiling to my Angular 2 project. Because each component has its own .css file (which now will be a .less file) I am not sure on how I could make the file compile to css...

我也搜索了该问题，但没有找到解决我问题的方法.

I have also googled the issue without finding any solution to my problem.

编辑 为了使我的问题更清楚: 我希望每个组件都有一个.less，就像Angular 2中.css文件的默认设置一样.我只希望每个.less被预编译，并且因为Angular在组件之后包含css作为内嵌脚本是由Angular处理的，我想我之间需要一些较少预处理的脚本，它存在吗?

EDIT To make my question more clear: I would like to have one .less for each component, just as it is as default with the .css files in Angular 2. I just want each .less to be precompiled, and because Angular is including the css as inline script after the component is processed by Angular, I guess that I need some less-preprocessing script in between, does it exist?

对于整个项目，我宁愿没有一个包含大文件的.less手册，这当然是一个可能的解决方案.尽管此解决方案似乎与Angular环境不兼容...

I would rather not have one big .less file included manual, for the whole project, which would of course be a possible solution. This solution seems to not be inline with the Angular environment though...

推荐答案

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

LESS (or SASS) are CSS preprocessors, so you will need to essentially compile them into CSS. A very popular way is to use a JavaScript task runner like based Grunt, Gulp, Brunch or Broccoli.

这是直接从Broccoli入门页面上摘录的示例.

Here's an example taken straight from the Broccoli getting started page.

1. 安装节点npm install -g broccoli-cli
2. 在项目目录根目录中，安装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

1. Install node npm install -g broccoli-cli
2. Inside your project directory root, install Broccoli npm install --save-dev broccoli
3. Install the Broccoli SASS and merge trees (bundling) plugins npm install --save-dev broccoli-sass broccoli-merge-trees
4. Create/Edit a Brocfile.js file
5. Build your assets broccoli build dist

Brocfile.js文件示例

Example Brocfile.js file

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

BTW: You can easily switch SASS for LESS

这篇关于如何在Angular 2中使用Less?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！