angular - 将 group-media-queries 与 extractTextPlugin 一起使用

Question

我正在创建一个“angular2”应用程序，并且为每个组件导入一个特定的 CSS 文件。我没有使用“styleUrls”，因为我希望将所有 CSS 捆绑在一个大文件中，而不是在标题中包含多个“style”标签。

现在，问题是在每个 CSS 文件中，我都有一些媒体查询来确保组件是响应式的。我注意在我的不同组件 CSS 文件中使用相同的媒体查询。

我还使用“webpack”和“extractTextPlugin”来创建一个大的 CSS 文件，我希望能够将所有相同的媒体查询组合在一起。我找到了“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'),
  ...
]