アンギュラ4のウェブパックに破裂を設定します。

Question

ウェブパックは初めてです。私のスタイルシートのコンパイルでは私はスタイラスを使用します。スタイラスを使用する良い点の1つは、破裂を使用してメディアクエリを生成できることです。どのように我々は、角度4.

Answer 1

でウェブパックと破裂NPMパッケージを設定します

yarn add rupture -Dまたはnpm install rupture -D

ルートディレクトリに.angular-cli.jsonファイルにstylePreprocessorOptionsを追加してのdevの依存関係として破裂を追加します。

"styles": [ 
    "styles.styl" 
], 
"stylePreprocessorOptions": { 
    "includePaths": [ 
    "../node_modules/rupture/" 
    ] 
}, 

破裂は今@import「破裂」

0123を使用して、アプリケーション間でインポートすることが可能ですグローバル styles.stylファイルに @import "rupture"文を置く

、複数のファイル内の個々の輸入せずに、それは世界的に利用できるようになり

注：コードブロック内stylesは場所への参照のみで、追加stylePreprocessorOptionsあなたが今どこにいてもいいですが、オブジェクトの一部になっていますアプリアレイ