媒体查询不适用于CSS / Style loader和Webpack3

Question

我正在为CSS 使用css-loader，style-loader但所有媒体查询均无法正常工作。我使用"webpack": "^3.4.1"，"css-loader": "^0.28.4"和"style-loader": "^0.18.2"。

这是我的Webpack配置：

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
  })
]

我的css文件是这样的：

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

我正在这样的React代码中导入此CSS文件：

import styles from './Component.css'

Answer 1

我认为问题在于您声明了 ExtractTextPlugin，但您使用的是 css 和样式加载器。

看一下这个设置以供参考：

插件

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

装载机

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

这将在生产版本中使用 ExtractTextPlugin，并在使用 webpack-dev-server 时回退到 style-loader，因为 ETP 不支持热重载。