Angular 4とwebpackを含むグローバルサスー

Question

私は、HMR付きのwebpackでAngular 4上に構築されたプロジェクトを持っています。これが重要かどうかわかりませんが、ASP Core 2に角度テンプレートを使用しています。

私がしようとしているのは、すべてのコンポーネントに適用されるグローバル/メインのscssファイルです。私はこのscssファイルをwebpackでコンパイルして、node_modulesフォルダ内の他のスタイルと一緒に配布したいと思っていました。

私は運が無ければこれを実装しようとしました。私の主なSCSSファイルがstyles.global.scssの名前と私は私のwebpack.config.jsファイルに以下のルールでそれを含めることを試みている

{ 
    test: /\.global\.scss$/, 
    exclude: /node_modules/, 
    use: ['style-loader', 'css-loader', 'sass-loader'] 
} 

私はアプリケーションを実行し、WebPACKのコマンドを実行したときに、私は、しかし、私は、すべてのエラーを得ることはありません私のスタイルが適用されているのを見ていない。私のnode_modulesフォルダ内のすべてのリソースが適用されているので、少なくとも動作します。私は、角度のあるコンポーネントにカプセル化のビューを保持したいと思います。私は、メイン/グローバルscssファイルを各コンポーネントのscssファイルにインポートする必要はなく、component.tsファイルのstylesUrlフィールドにそれを含める必要はありません。

追加コードが必要な場合はお知らせください。前もって感謝します！

EDIT：誰かが同じような状況に遭遇した場合の質問にこれを含めることを望みました。私は上記のルールと直接衝突していた.scssファイルのための別のルールを持っていました。

{ 
    test: /\.scss$/, 
    exclude: /node_modules/, 
    use: [ 'raw-loader', 'sass-loader' ] 
}, 

Answer 1

Webpackにファイルを処理するように指示する必要があるようです。あなたは（あなたが標準セットアップを使用していると仮定）boot.browser.tsの一番上にインポートしてそれを行うことができます：

import './path/to/styles.global.scss'; 

UPDATEを：コメントや対応チャットでさらに議論に基づいて、我々は発見している2つの.scssルールお互いに矛盾していた。これに基づき、元の質問に示すルールを更新すると、この問題は修正されます。

{ 
    test: /\.scss$/, 
    exclude: [/node_modules/, /.global.scss$/], 
    use: [ 'raw-loader', 'sass-loader' ] 
} 

これは*.global.scssファイルは一度だけ処理されることが保証されます。