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, Jul 08 '18 at 01:29

score 2 · Answer 1 · answered Aug 01 '17 at 07:56

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 01 '17 at 07:56

Abdo-Host

2,470
34
33

I am using this container class in my React code like this: `
content
`. changing `@media (max-width: 768px)` to `@media only screen and (max-width:768px)` not wroking. – sahil solanki Aug 01 '17 at 10:10
this links for help you http://www.davidboyne.co.uk/2016/11/07/building-a-media-query-component-in-react.html , https://www.npmjs.com/package/react-native-media-queries – Abdo-Host Aug 01 '17 at 10:21

score 0 · Answer 2 · answered Aug 01 '17 at 07:55

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 01 '17 at 07:55

Vlatko Vlahek

1,839
15
20

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 Aug 01 '17 at 09:59
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: https://github.com/ssolanki/smallcase – sahil solanki Aug 01 '17 at 10:04

score 0 · Answer 3 · answered Jan 26 '23 at 17:25

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.

Media Query not working with CSS/Style loader and Webpack3

3 Answers3