I'm creating an "angular2" app and for each component, I'm importing a specific CSS file. I'm not using "styleUrls" because I want all the CSS to be bundled in one big file instead of having multiple "style" tags in the header.
Now, the thing is that in each CSS file, I have some media queries to ensure that the component is responsive. I paid attention to use same media queries across my different components CSS files.
I'm also using "webpack" with the "extractTextPlugin" in order to create one big CSS file and I'd like to be able to group all the same media queries together. I found the "group-css-media-queries-loader" package but I can't get it to work. I suspect that it fires on every chunk instead of on the bundle. Here's the relevant part of my "webpack.config.js" file:
...
{
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'),
...
]
