我正在为我的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>
我认为问题是你声明了 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 时回退到样式加载器,因为 ETP 不支持热重载。
感觉很傻,以至于我浪费了和我一样多的时间,不明白为什么我面临同样的问题。 只是想把它包括在这里供其他人参考......
请注意,此问题也可能有其他原因。 我的问题是我没有添加带有视口的元标记。
前 -<meta name="viewport" content="width=device-width, initial-scale=1" />
希望这有帮助。