How to use Less with Angular 2?

问题:

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.

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?

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...

回答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

回答2:

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

回答3:

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

回答4:

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.