一、PostCSS介绍
PostCSS利用 JavaScript 的强大编程能力对 CSS 代码进行转换，通过配置不同的PostCSS的插件来实现对CSS代码特定的转换，常用的PostCSS插件有
- Autoprefixer 为css增加不同浏览器厂商的前缀
- PostCSS Preset Env 将现代 CSS 语法转换成大多数浏览器都能理解的东西
- CSS 模块 解决全局的css命令冲突
二、webpack中使用PostCSS
- 安装PostCSS相关依赖
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']
})
}
]
}, // 处理对应模块
- 在根目录新增postcss.config.js配置文件
module.exports = {
plugins: { // 插件列表
'autoprefixer': {}
}
}
- 配置package.json文件,增加如下配置
"browserslist": [
"> 1%", // 全球超过1%人使用的浏览器
"last 2 versions" // 所有浏览器兼容到最后两个版本根据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属性已经增加各浏览器厂商的前缀
css自动增加前缀
