How to use Less with Angular 2?

If you are creating a new app, just after the app name add --style to choose your preprocessor.

ng new my-first-app --style less

All options for angular cli 'new' command

New project

You can use the --style flag to set a CSS preprocessor

ng new my-app --style less

Existing project

1. If you have an existing project, then you can edit .angular-cli.json file and set defaults.styleExt value to less. Or you can use simply use: ng set defaults.styleExt less
2. Rename a component's CSS file from mycomp/mycomp.component.css -> mycomp/mycomp.component.less
3. Update styleUrls in mycomp/mycomp.component.ts, e.g. styleUrls: ['./mycomp.component.css'] -> styleUrls: ['./mycomp.component.less']

Resource

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