Media Query not working with CSS/Style loader and Webpack3

Question

I am using css-loader and style-loader for my CSS but all media queries are not working. I am using "webpack": "^3.4.1", "css-loader": "^0.28.4" and "style-loader": "^0.18.2".

This is my Webpack configuration:

const ExtractTextPlugin = require('extract-text-webpack-plugin')

rules: [{
  test: /\.css$/,
  use: [{
    loader: 'style-loader'
  }, {
    loader: 'css-loader',
    options: {
      modules: true,
      localIdentName: '[name]-[local]-[hash:base64:6]',
      camelCase: true
    }
  }]
}]
...
plugins: [
  new ExtractTextPlugin({
    filename: 'style.[chunkhash:6].css',
    allChunks: true
  })
]

My css file is something like this:

.container{
  position: relative;
  margin: 30px 15px;
  padding: 50px 15px;
  background: #fff;
}
@media (max-width: 768px) {
  .container{
    background: #fbfbfb;
  }
}

and I am importing this CSS file in React code like this:

import styles from './Component.css'

I have the same problem with webpack 4, do you found the reason? :) Thanks! — Aral Roca
– Aral Roca, Commented Jul 8, 2018 at 1:29

Abdo-Host · Accepted Answer · 2017-08-01 07:56:08Z

2

try use this code

.container{
  position: relative;
  margin: 30px 15px;
  padding: 50px 15px;
  background: #fff;
}
@media only screen and (max-width:768px){
  .container{
    background: #c00;
  }
}

<div class="container">
content her
</div>

answered Aug 1, 2017 at 7:56

Abdo-Host

4,4312 gold badges40 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sahil solanki Over a year ago

I am using this container class in my React code like this: <div className = {styles.container}> content </div>. changing @media (max-width: 768px) to @media only screen and (max-width:768px) not wroking.

Abdo-Host Over a year ago

this links for help you davidboyne.co.uk/2016/11/07/… , npmjs.com/package/react-native-media-queries

Vlatko Vlahek · Accepted Answer · 2017-08-01 07:55:57Z

0

I think that the problem is that you declared the ExtractTextPlugin, but you are using css and style loader instead.

Take a look at this setup for reference:

plugins

 plugins: [
    new ExtractTextPlugin({ 
      filename: "css/bundle.css", 
      allChunks: true,
      disable: process.env.NODE_ENV !== 'production'
    }),
  ]

loader

  {
    test: /\.css$/,
    loader: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: 'css-loader?importLoaders=1'
    })
  }

This would use ExtractTextPlugin with production builds, and fallback to style-loader when using webpack-dev-server because ETP doesn't support hot reloading.

answered Aug 1, 2017 at 7:55

Vlatko Vlahek

1,88915 silver badges21 bronze badges

2 Comments

sahil solanki Over a year ago

for the production deploy I am using something like this:

{       test: /\.css$/,       use: ExtractTextPlugin.extract(['css-loader?modules,localIdentName="[name]-[local]-[hash:base64:6]",camelCase'])     }    new ExtractTextPlugin({       filename: 'style.[chunkhash:6].css',       allChunks: true     })

Over here as well my media queries were not working. I was putting my CSS classes like this className = {styles.container} while generated css was of type like this: .-UsersList-container-3L5uHG-

sahil solanki Over a year ago

After your changes, there is no class added to any HTML element so my page is without styling. My Webpack configurations can be found here: github.com/ssolanki/smallcase

ציפורה · Accepted Answer · 2023-01-26 17:25:12Z

0

Feels so silly that I wasted as much time as I did, not getting why I was facing this same issue. Just wanted to include it here for anyone else's reference as well...

Note, There could be other reasons for this issue as well. My issue was that I hadn't added the meta tag w/ viewport.

FYR - <meta name="viewport" content="width=device-width, initial-scale=1" />

Hope this helps.

answered Jan 26, 2023 at 17:25

ציפורה

1364 bronze badges

Collectives™ on Stack Overflow

Media Query not working with CSS/Style loader and Webpack3

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related