一捏膨、PostCSS介紹
PostCSS利用 JavaScript 的強(qiáng)大編程能力對(duì) CSS 代碼進(jìn)行轉(zhuǎn)換秧均，通過(guò)配置不同的PostCSS的插件來(lái)實(shí)現(xiàn)對(duì)CSS代碼特定的轉(zhuǎn)換，常用的PostCSS插件有
- Autoprefixer 為css增加不同瀏覽器廠商的前綴
- PostCSS Preset Env 將現(xiàn)代 CSS 語(yǔ)法轉(zhuǎn)換成大多數(shù)瀏覽器都能理解的東西
- CSS 模塊 解決全局的css命令沖突
二号涯、webpack中使用PostCSS
- 安裝PostCSS相關(guān)依賴
npm i postcss-loader autoprefixer -D
- 配置webpack.config.js
module: {
rules: [
{
test: /\.styl$/,
use: ExtractTextWebpackPlugin.extract({
// 將css用link的方式引入就不再需要style-loader了
use: ['css-loader', 'postcss-loader','stylus-loader']
})
}
]
}, // 處理對(duì)應(yīng)模塊
- 在根目錄新增postcss.config.js配置文件
module.exports = {
plugins: { // 插件列表
'autoprefixer': {}
}
}
- 配置package.json文件,增加如下配置
"browserslist": [
"> 1%", // 全球超過(guò)1%人使用的瀏覽器
"last 2 versions" // 所有瀏覽器兼容到最后兩個(gè)版本根據(jù)CanIUse.com追蹤的版本
]
- 修改src/stylus/style.css文件,新增屬性display: flex
html,body
margin 0
padding 0
font-size 40px
text-align center
display flex
-
重新打包后目胡，查看dist/css/style.css，可以看到display: flex屬性已經(jīng)增加各瀏覽器廠商的前綴
css自動(dòng)增加前綴
