How to use Less with Angular 2?

Question

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 su

Answer 1

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.

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

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

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

BTW: You can easily switch SASS for LESS