Less with Angular 2の使い方は？

Question

私はAngular 2プロジェクトにどのようにコンパイルを追加することができるのかを知りたい。各コンポーネントには独自の.cssファイル（現在は.lessファイル）がありますので、どのようにファイルをコンパイルすることができるのか分かりません...

解決策を見つけることなく問題を探しました私の問題に。私の質問は、より明確にする

EDIT ： 私はそれが角2の.cssファイルでデフォルトとしてあるのと同様に、各コンポーネントの1 .lessがしたい私は、各.lessをプリコンパイルすることにしたいですAngularはコンポーネントをAngularで処理した後にインラインスクリプトとしてCSSをインクルードしているので、あまり前処理されていないスクリプトが必要だと思います。

私はむしろ大きな無意味なファイルをマニュアルに含めずに、プロジェクト全体ではもちろん可能な解決策になります。この解決策はAngular環境にはインラインではないようですが...

Answer 1

LESS（またはSASS）はCSSプリプロセッサなので、CSSにコンパイルする必要があります。非常に一般的な方法は、Grunt、Gulp、BrunchまたはBroccoliのようなJavaScriptタスクランナーを使用することです。

ブロッコリーの開始ページから直接取得したexampleです。 Brocfile.jsが

ファイル作成/編集、プロジェクトディレクトリのルート内部ノードnpm install -g broccoli-cli

をインストールブロッコリーnpm install --save-dev broccoli

はブロッコリーSASSをインストールし、木（同梱）をマージインストールプラグインnpm install --save-dev broccoli-sass broccoli-merge-trees

1. 資産を構築するbroccoli build dist

例Brocfile.jsはところで

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

ファイル：あなたは簡単のためにSASSを切り替えることができますLESS

Answer 2

あなたはまだあなたのすべてのコンポーネントのすべてのスタイル規則を含む単一の.cssを使用し、すべてのコンポーネントで同じ.cssファイルをインポートすることができます（:host {の代わりにセレクタ/タグ名を使用する必要があります）。とにかく、ブラウザはファイルをキャッシュします。したがって、一度だけダウンロードします。

小さいスコープの.cssファイルの利点は失われます。

Lessについては分かりませんが、SASSでは現在、インポートパスにID /名前の接頭辞を付けることができるカスタムインポーターを開発中です。カスタムインポーターは、そのID /名前のオーバーライドが定義されていればローカルでチェックします代わりにこれを返します。そうでない場合、インポートはデフォルトに戻ります。
コンポーネントの作成者は、ビルド時にデフォルトの代わりに独自の変数、ミックスインなどを渡すことができるオーバーライドフックを提供できます。

Answer 3

新しいアプリを作成する場合は、アプリ名の後ろに--styleを追加してプリプロセッサを選択します。

ng new my-first-app --style less 

All options for angular cli 'new' command

Answer 4

新しいプロジェクト

あなたはCSSプリプロセッサ

ng new my-app --style less 

既存のプロジェクト

を設定する --styleフラグを使用することができます

1. 既存のプロジェクトがある場合は、.angular-cli.jsonファイルを編集し、defaults.styleExtの値をlessに設定します。 - 例えば、mycomp/mycomp.component.tsに更新styleUrls>mycomp/mycomp.component.less
2. ng set defaults.styleExt less
3. はmycomp/mycomp.component.cssからコンポーネントのCSSファイルの名前を変更します。それとも、単に使用を使用することができますstyleUrls: ['./mycomp.component.css'] - >styleUrls: ['./mycomp.component.less']

Resource