Question

我正在创造一个＆＃34; angular2＆＃34;应用程序和每个组件，我导入一个特定的CSS文件。我没有使用＆＃34; styleUrls＆＃34;因为我希望将所有CSS捆绑在一个大文件中，而不是多个＆＃34;样式＆＃34;标题中的标签。

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

我也在使用＆＃34; webpack＆＃34;使用＆＃34; extractTextPlugin＆＃34;为了创建一个大的CSS文件，我希望能够将所有相同的媒体查询组合在一起。我找到了＆＃34; group-css-media-queries-loader＆＃34;包裹，但我不能让它工作。我怀疑它会在每个块上而不是在捆绑上触发。这是我的＆＃34; webpack.config.js＆＃34;的相关部分。文件：

...
{
  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'),
  ...
]

使用extractTextPlugin进行group-media-queries

0 个答案: