How To Add Less To Existing Angular 5 Project

Question

I have this JS Fiddle for a CSS chart. How do I add LESS to an existing Angular 5 project so that I can utilize this chart, and where do I place the JavaScript and references to the LESS file from this example in my Angular component? JSFiddle included below.

JavaScript:

$('head style[type="text/css"]').attr('type', 'text/less');
less.refreshStyles();

http://jsfiddle.net/andydesrosiers/fwaLt99a/

Andy, That's a pretty cool chart you have there, but there are a couple of issues you are going to run into. 1. That js you have there is jQuery. It's generally considered unwise to include jQuery in an Angular project. 2. Angular favors sass or just plain ole' css over less. You could port this chart to sass and then use it. That's probably your best option if you want to use angular. — Woot, Nov 21 '17 at 21:48
@Woot *2. Angular favors sass or just plain ole' css over less* - Any citation form the docs? — seven-phases-max, Nov 21 '17 at 23:52
@seven-phases-max you make a good point, I should have checked the docs. My first comment was incorrect. When I first started using the angular cli it only supported css and sass, but now it supports multiple css preprocessors they can be found here https://github.com/angular/angular-cli/wiki/new. I would say my first point is still correct when using Angular, while you can use jQuery allowing another library to manipulate the DOM other than Angular is not a good practice. — Woot, Nov 22 '17 at 00:03

score 1 · Accepted Answer · answered Apr 13 '18 at 11:00

A typical Angular component has a html, a typescript and a style file. The later is usually css:

my-comp.component.html
my-comp.component.ts
my-comp.component.less     <-- by default, is css

You want to tell angular to look for a .less file instead of .css and compile it during the build process. To do this:

Edit the file .angular-cli.json in your project. Set the property defaults.styleExt to "less".
For every existing component that uses css and you want to change to less, rename the style file and make sure that the typescript file points to the correct stylesheet:
```
@Component({
  selector: 'app-my-comp',
  templateUrl: './my-comp.component.html',
  styleUrls:  ['./my-comp.component.less']
})
```

score 0 · Answer 2 · answered Nov 21 '17 at 21:54

I have not the best solution, but it works for me. As I don't have a node server, what I do is have de scss file in project. I compile it online, and it gives me the css and I put it on the project again. It still with both files but the scss (less in your case) stays there and when I need more css I code it normaly but always add on scss too. So I compile it e overwrite the older css again. It's not so safe but works very well when you can't add a new server to solve your dynamic styling problems. But if you are on a big project maybe it's better to add a node server or something like to have your less working safely.

Woot · Answer 3 · 2018-03-01T13:00:12.963

Andy, one of my previous statements was incorrect Angular supports many css preprocessors including less. Now that I know this here is one possible solution to your problem. You can generate a component like below.

-voltage-meter.component.ts

import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';

@Component({
  selector: 'app-voltage-meter',
  templateUrl: './voltage-meter.component.html',
  styleUrls: ['./voltage-meter.component.less'],
  encapsulation: ViewEncapsulation.None
})
export class VoltageMeterComponent implements OnInit {
  @Input() voltage: number;
  constructor() { }

  ngOnInit() {
    console.log(this.voltage);
  }

}

-voltage-meter.component.less (just paste your less code in this file)

-voltage-meter.component.html

<div class="radial-progress" attr.data-progress='{{voltage}}'>
    <div class="circle">
        <div class="mask full">
            <div class="fill"></div>
        </div>
        <div class="mask half">
            <div class="fill"></div>
            <div class="fill fix"></div>
        </div>
        <div class="shadow"></div>
    </div>
    <div class="inset">
        <div class="voltage"><div class="voltage-in-use">Voltage in use</div></div>
    </div>
</div>

Then you can use the component using

<app-voltage-meter [voltage]='12'></app-voltage-meter>

I got this working using the Angular cli to generate the project assigning it the less preprocessor

ng new less-test --style=less

That would allow you to use the less code you have in your jsfiddle example.

Apologize again for my erroneous statement earlier today and thanks to seven-phases-max for pointing out my error.

Edit: For an existing project follow this article just replace scss with the preprocessor you are using.

Angular-cli from css to scss

The question was about adding less to existing angular project, not about creating new one with less support. — alx, Mar 01 '18 at 06:02
@alx you are correct so I have included a link that explains how to convert a projects css preprocessor. — Woot, Mar 01 '18 at 13:00

How To Add Less To Existing Angular 5 Project

3 Answers3