私が直面している正確なシナリオを与えるために、Webpackを使ってZurbのFoundationパッケージをアプリケーションにバンドルしようとしています。バンドルされたJSを見ると、Foundation SCSS はにインポートされますが、アプリケーションのレンダリングに適用する方法がわかりません。Angular2アプリケーションにグローバルにスタイルを適用するにはどうすればよいですか？
ルートコンポーネントのスタイル属性でrequire('../../node_modules/foundation.scss/foundation.scss)を試してみましたが、そのコンポーネントのHTMLではスタイルが設定されているように見えますが、子コンポーネントのHTMLではスタイルが設定されていないようです。
これを行う正しい方法は何ですか？
ルートフォルダのindex.htmlファイルにcssファイルを含める場合は、アプリケーション全体に適用する必要があります。
それ以外の場合は、コンポーネントのメタデータ内のstyleプロパティを使用して、特定のコンポーネントに特定のCSSファイルを含めることができます。コメントで明確化のために
更新：
あなたはWebPACKのために抽出テキストプラグインを使用することができます。 "それは入力チャンク内のすべてのrequire（" style.css "）を別々のCSS出力ファイルに移動するので、スタイルはJavaScriptにインライン展開されず、CSSバンドルファイル（styles.css）ボリュームが大きい場合、スタイルシートバンドルがjavascriptバンドルと並行してロードされるため、処理速度が向上します。
https://github.com/webpack/extract-text-webpack-plugin
ホットリロードは利用できないため、変更しないでください。私はあなたがfoundation.cssに変更を加えるつもりはないと考えているので、そのための別個のバンドルされたCSSを作成するだけです
私は誤解されるかもしれませんが、あなたはルートコンポーネントにメインファンデーションCSSを含める方法を見つけたようですCSSは他のコンポーネントには適用されません。あなたがこのインポートする必要がViewEncapsulation.None
あなたのルートコンポーネントインサイド：
このような場合は、私はあなたが使用するルートコンポーネントを設定する必要があると思う： カプセル化
import {ViewEncapsulation} from '@angular/core';
をし、
@Component({
moduleId: module.id,
selector: 'global-css',
templateUrl: 'global-css.component.html',
styleUrls: ['global-css.component.css'],
encapsulation: ViewEncapsulation.None
})
ViewEncapsulation.Noneは基本的にはこのコンポーネントだけにCSSをスコープしません。
ルートコンポーネントでこれをやって、いくつかの理由で許可されていない場合は、ViewEncapsulation.Noneを持っており、そしてちょうど
は、あなたが拡大することができ、あなたのルートアプリケーションのコンポーネントには、このコンポーネントをインポートする「グローバル・CSSの」コンポーネントを作成してみてくださいこれがWebpackでどのように機能するか説明するWebpacked CSSをJSファイルに入れずに挿入する方法がわかりません。 – user1381745
更新された回答。どのようにCSSをCSSにコンパイルするのかという疑問はありますか？もしそうなら、それを行う方法を示すたくさんのリンクがあります。 – user2263572
いいえWebpackがSCSSをCSSに正しくコンパイルし、そのCSSをbundle.jsファイルに挿入しています。私のやり方が分からないのは、そのコンポーネントのstyles属性を介した孤独なコンポーネントではなく、そのCSSをドキュメント全体に適用することです。あなたの例によれば、参照する独立したCSSファイルがないので、単純なリンクタグでは不十分です（私は望みます...）。 – user1381745