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

You can still use a single .css which contains all style rules for all of your components and import the same .css file in every component (you have to use the selector/tag name instead of :host {). The browser caches the file anyway therefore it will download it only once.

The advantage of small scoped .css files is lost though.

I don't know about Less but for SASS I'm currently working on a custom importer where import paths can be prefixed with an id/name and the custom importer checks locally if an override for that id/name is defined and returns this instead, otherwise the import falls back to the default.
This way creator of components can provide override hooks where the user can pass it's own variables, mixins, ... instead of the default at build time.

Answer 2

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

Answer 3

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

Answer 4

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