媒體查詢不能使用CSS /樣式加載器和Webpack3

我使用css-loader和style-loader爲我的CSS，但所有媒體查詢不起作用。我正在使用"webpack": "^3.4.1","css-loader": "^0.28.4"和"style-loader": "^0.18.2"。媒體查詢不能使用CSS /樣式加載器和Webpack3

這是我的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'

來源

2017-08-01 sahil solanki

我認爲問題在於您聲明瞭ExtractTextPlugin，但您使用的是c ss和樣式加載器。

看看這個設置供參考：

插件

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不支持熱rel oading。

來源

2017-08-01 07:55:57

對我使用這樣的生產部署： '{ 測試：/\.css$/，使用：ExtractTextPlugin.extract （['css-loader？modules，localIdentName ='[name] - [local] - [hash：base64：6]「，camelCase']） } 新增ExtractTextPlugin（{[]文件名：'style。[chunkhash： 6] .css'， allchunks：true }）' 在這裏以及我的媒體查詢不起作用。當我生成的CSS的類型是這樣的時候，我把這樣的'className = {styles.container}'放入我的CSS類中：'。-UsersList-container-3L5uHG- –

更改之後，沒有添加任何類HTML元素，所以我的頁面沒有樣式。我的Webpack配置可以在這裏找到：https://github.com/ssolanki/smallcase –

嘗試使用此代碼

.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>

來源

2017-08-01 07:56:08

我在我的React代碼中使用這個容器類，像這樣：'

content

'。改變'@media（max-width：768px）'爲'@media唯一屏幕和（max-width：768px）'不打火。 –

此鏈接可以幫助您http://www.davidboyne.co.uk/2016/11/07/building-a-media-query-component-in-react.html，https://www.npmjs.com/包/反應天然媒體查詢 –

媒體查詢不能使用CSS /樣式加載器和Webpack3

回答

相關問題