既存のAngular 5プロジェクトに追加する方法はありません

Question

私はCSSチャートのためにこのJS Fiddleを持っています。既存のAngular 5プロジェクトにLESSを追加して、このチャートを利用できるようにするにはどうしたらいいですか？この例のJavaScriptとLESSファイルへの参照は、Angularコンポーネントでどこに配置しますか？ JSFiddleは以下に含まれています。

はJavaScript：

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

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

Answer 1

私は最善の解決策を持っていないが、それは私のために動作します。私はノードサーバーを持っていないので、私はプロジェクトでscssファイルを持っています。私はそれをオンラインでコンパイルし、それは私にCSSを与えて、私は再びプロジェクトに入れます。それでも両方のファイルがありますが、scss（あなたの場合は少ない）がそこにとどまっています。私がもっとコードを必要とするとき、私はそれをnormalyにコードしますが、常にscssにも追加します。だから私はそれをコンパイルし、古いcssを上書きします。これは安全ではありませんが、ダイナミックなスタイリングの問題を解決する新しいサーバーを追加できない場合は非常に効果的です。しかし、大規模なプロジェクトに取り組んでいるのであれば、ノードサーバなどを追加して安全性を低下させる方が良いかもしれません。

Answer 2

私の前のステートメントの1つが間違っていましたAngularは、lessを含む多くのcssプリプロセッサをサポートしています。ここで私はこれがあなたの問題に対する可能な解決策であることを知っています。以下のようなコンポーネントを生成することができます。

-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

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

次にあなたが

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

を使用して、コンポーネントを使用することができます

私はそれをあなたがあなたのjsfiddle例で持っているより少ないコードを使用することができるようになるあまり、プリプロセッサ

ng new less-test --style=less 

を割り当てるプロジェクトを生成するために角度CLIを使用してこの作業を得ました。

今日の私の誤った陳述と、私の誤りを指摘するための7相-maxに感謝します。

編集：既存のプロジェクトについては、この記事に従ってください。scssを使用しているプリプロセッサに置き換えてください。

Angular-cli from css to scss