我正在为我的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'
最佳答案
尝试使用此代码
.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>
关于css - 媒体查询不适用于 CSS/样式加载器和 Webpack3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45431640/