angular - extractTextPlugin で group-media-queries を使用する

Question

「angular2」アプリを作成しており、コンポーネントごとに特定の CSS ファイルをインポートしています。ヘッダーに複数の「スタイル」タグを含めるのではなく、すべての CSS を 1 つの大きなファイルにバンドルする必要があるため、「styleUrls」は使用していません。

さて、各 CSS ファイルには、コンポーネントが確実に反応するようにするためのメディア クエリがいくつかあります。さまざまなコンポーネントの CSS ファイルで同じメディア クエリを使用するように注意しました。

また、1 つの大きな CSS ファイルを作成するために、「extractTextPlugin」で「webpack」を使用しています。同じメディア クエリをすべてグループ化できるようにしたいと考えています。「group-css-media-queries-loader」パッケージを見つけましたが、動作させることができません。バンドルではなく、すべてのチャンクで起動すると思われます。「webpack.config.js」ファイルの関連部分は次のとおりです。

...
{
  test: /\.css$/,
  include: path.resolve(__dirname, 'src/app'),
  use: [ 'raw-loader' ]
},
{
  test: /\.css$/,
  exclude: path.resolve(__dirname, '/src/app'),
  use: extractTextPlugin.extract({ 
      fallback: 'style-loader', 
      use: 'css-loader'    
    })
}
...
plugins: [ 
  ...
  new extractTextPlugin('css/[name].css'),
  ...
]