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'

Answer 1

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>