plugin doesn't output media related files based on query. Is it because of loaders?

[ctsenthil]

First of all great plugin which i was looking for to reduce the file size and improve the performance of the website.

I am having issue in generating query related files. Can you help me out what is wrong in the below code'

plugins: [
new DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
'ENV_PROXY': JSON.stringify(env.proxy),
}),
new CopyWebpackPlugin({
patterns: [
{ from: resolve(projectRoot, 'assets//*'), to: resolve(projectRoot, 'dist/web-react/assets') },
{ from: resolve(projectRoot, 'locales//*'), to: resolve(projectRoot, 'dist/web-react/locales') }
]
}),

new MiniCssExtractPlugin({
  filename: 'web-react/assets/css/[name].css',
  chunkFilename: 'web-react/assets/css/[name].chunk.css',
  ignoreOrder: true // ignores chunk order console warnings (https://www.npmjs.com/package/mini-css-extract-plugin#remove-order-warnings)
}),
new MediaQueryPlugin({
  include: true,
  queries: {
      '(max-width: 479px)': 'mobile',
      '(max-width: 839px)': 'tablet'
  }

}),
//new MobileFirstMediaQueriesSplitterPlugin([600, 1024]),
new WatchIgnorePlugin({
paths: [
'cypress/**/*'
]}),
],

Thanks

[SassNinja]

Hi @ctsenthil

thanks for using my plugin!

However "having issue" doesn't help me much to reproduce your problem.
You've shared a large webpack config but could you specify what exactly is not working?
How do the filenames & the sass code you're sending to webpack look and what output do you expect?

[ctsenthil]

@SassNinja loaders are not getting applied to the media chunks. filename are '[name].[contenthash].css', format

[SassNinja]

Are you talking about your chunks which contains both, CSS inside of @media rules and without?
Or do you mean that no loaders are appled to the chunks which are generated by my plugin?

In case of the latter there's an open bug issue for it #17

If my plugin doesn't do anything it would be helpful to see a sass code example.

[ctsenthil]

@media rules what ever i added in queries gets removed from main.df26c7424f7f201fa000.css. but it didn't generate individual file based on the query .

queries: {
'(min-width: 0px)and (max-width: 479px)': 'mobile',
'(min-width: 480px)and (max-width: 839px)': 'tablet',
'(min-width: 1024px)': 'desktop'
}

i expect to see main-mobile.df26c7424f7f201fa000.css,main-tablet.df26c7424f7f201fa000.css,main-desktop.df26c7424f7f201fa000.css

[SassNinja]

That's weird... if it removes the code from your original sass file, then it should definitely appear somewhere because it doesn't remove any code without being able to save it at the end.

My assumption is that either some plugin in your webpack process removes those files or another loader/plugin interferes with it and overwrites the extracted code. In any case it's hard to debug without having a sample to easily reproduce the problem.

So I can only suggest that you either try to remove one loader/plugin after the other to find out if there's one interfering with my plugin. Or another possiblity is that you create a simple webpack setup (e.g. using codesandbox) with example sass code which shows the problem.

[govorov-top]

Indeed, you have such a problem. When inside the media request there is for example "background: url(../img.jpg )", then it is not processed...