當前我們在寫css樣式的時候總是要處理瀏覽器兼容問題，那就是加前綴問題，可是我們在開發的時候比如：
直接寫個：

.className{display: flex; }

想變成下面這種的

.className{display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex; }

以下就是配置方法：

安裝

添加瀏覽器前綴需要下載的插件autoprefixer

npm install --save-dev css-loader style-loader postcss-loader autoprefixer

配置webpack.config.js

{test: /\.css$/,use: [{loader: 'style-loader'},{loader: 'css-loader',options: {modules: true,importLoaders: 1,minimize: true,localIdentName: '[local]_[hash:base64:5]'}},{loader: 'postcss-loader'}}

在項目根目錄創建 postcss.config.js

在項目根目錄創建 postcss.config.js，并且設置支持哪些瀏覽器，必須設置支持的瀏覽器才會自動添加添加瀏覽器兼容

module.exports = {plugins: [require('autoprefixer')({"browsers": ["defaults","not ie < 11","last 2 versions","> 1%","iOS 7","last 3 iOS versions"]})] };

browsers配置

總結

以上是生活随笔為你收集整理的webpack4.x中使用postcss-loader和autoprefixer给css3样式添加浏览器兼容的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。