postcss-loader有什么用?如何配置webpack讓瀏覽器自動補全前綴

Postcss 本身是一個功能比較單一的工具。它提供了一種方式用 JavaScript 代碼來處理 css。它負責把 CSS 代碼解析成抽象語法樹結構（Abstract Syntax Tree，AST），再交由插件來進行處理。插件基於CSS 代碼的 AST 所能進行的操作是多種多樣的，比如可以支持變量和混入（mixin），增加瀏覽器相關的聲明前綴，或是把使用將來的 CSS 規范的樣式規則轉譯（transpile）成當前的 CSS 規范支持的格式。從這個角度來說，PostCSS 的強大之處在於其不斷發展的插件體系。

在webpack4. 的配置里面，切記版本不同，postcss-loader的配置會有相應的變化。我們要使用瀏覽器自動補全工具首先要安裝 postcss-loader並配合autoprefixer插件。

 

（1）首先將兩個必要插件安裝到本地依賴。

npm i postcss-loader autoprefixer -D

 

 (2) 在 webpack 中配置 module，

module：{
 test: /\.less$/, use: [
 'style-loader'
 'css-loader',
 'postcss-loader',
 'less-loader',
 ]
}

豌豆資源搜索網站https://55wd.com 電腦刺綉綉花廠 ttp://www.szhdn.com

 (3) 創建 postcss.config.js文件

module.exports = {
 plugins: [
 require('autoprefixer')({
 overrideBrowserslist: [
 "Android 4.1",
 "iOS 7.1",
 "Chrome > 31",
 "ff > 31",
 "ie >= 8",
 "> 1%", // 必須大於 1% 用戶使用的瀏覽器
 //'last 2 versions', // 所有主流瀏覽器最近的 2個版本
 ],
 grid: true
 })
 ]
}

當然還有另外一種配置 postcss-loader 的方式，在 package.json 文件加：

"browserslist": [
 "defaults",
 "not ie < 11",
 "last 2 versions",
 "> 1%",
 "iOS 7",
 "last 3 iOS versions"
],

然后 創建 postcss.config.js

module.exports = {
 plugins: [
 require('autoprefixer')()
 ]
}

相信到這里你就會使用 瀏覽器自動補全工具啦