Wie man weniger vorhandenes angulares 5 hinzufügt Projekt

Question

Ich habe dieses JS Fiddle für ein CSS-Diagramm. Wie füge ich LESS zu einem vorhandenen Angular 5-Projekt hinzu, so dass ich dieses Diagramm verwenden kann, und wo platziere ich das JavaScript und Verweise auf die LESS-Datei aus diesem Beispiel in meiner Angular-Komponente? JSFiddle ist unten enthalten.

JavaScript:

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

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

Answer 1

Ich habe nicht die beste Lösung, aber es funktioniert für mich. Da ich keinen Knotenserver habe, muss ich die de scss Datei im Projekt haben. Ich kompiliere es online, und es gibt mir die CSS und ich habe es wieder auf das Projekt. Es ist immer noch mit beiden Dateien, aber die Scss (weniger in Ihrem Fall) bleibt dort und wenn ich mehr css brauche ich es normal Code aber immer auf scss auch hinzufügen. Also kompiliere ich es und überschreibe das ältere css nochmal. Es ist nicht so sicher, funktioniert aber sehr gut, wenn Sie keinen neuen Server hinzufügen können, um Ihre dynamischen Stylingprobleme zu lösen. Aber wenn Sie an einem großen Projekt interessiert sind, ist es vielleicht besser, einen Knotenserver hinzuzufügen oder so, dass Sie weniger sicher arbeiten.

Answer 2

Andy, eine meiner früheren Aussagen war falsch Winkel unterstützt viele css Preprozessoren einschließlich weniger. Jetzt, wo ich das hier weiß, ist eine mögliche Lösung für Ihr Problem. Sie können eine Komponente wie unten erzeugen.

-Spannung-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); 
    } 

} 

-Spannung-meter.component.less (nur Ihre weniger Code in dieser Datei einfügen)

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

Dann können Sie die Komponente verwenden

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

mit

Ich habe diese Arbeit die Winkel cli mit dem Projekt generieren sie den weniger Präprozessor

ng new less-test --style=less 

zuweisen, dass Sie die weniger Code, den Sie in Ihrem jsfiddle Beispiel haben zu verwenden, erlauben würde.

Entschuldigen Sie sich noch einmal für meine fehlerhafte Aussage früher heute und dank sieben-phas-max für das Aufzeigen meines Fehlers.

Edit: Für ein bestehendes Projekt folgen Sie diesem Artikel nur ersetzen scss mit dem Präprozessor Sie verwenden.

Angular-cli from css to scss