如何向现有的Angular 5项目中添加更少内容

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/

Answer 1

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'] }) 

Answer 2

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.

Answer 3

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