什么是postcss
postcss 一种对css编译的工具，类似babel对js的处理，常见的功能如：
-
使用下一代css语法
-
自动补全浏览器前缀
-
自动把px代为转换成rem（rem不熟悉的，点这）
-
css 代码压缩等等
postcss 只是一个工具，本身不会对css一顿操作，它通过插件实现功能，autoprefixer 就是其一。
与 less sass 的区别
less sass 是预处理器，用来支持扩充css语法。
postcss 既不是预处理器也不是后处理器，其功能比较广泛，而且重要的一点是，postcss可以和less/sass结合使用
关于取舍，虽然可以结合less/sass使用，但是它们还是有很多重复功能，用其中一个基本就 ok 了。
如何使用
这里只说在webpack里集成使用，首先需要 loader
1. 安装
npm install postcss-loader –save-dev
2. webpack配置
一般与其他loader配合使用，下面*标部分才是postcss用到的
配合时注意loader的顺序（从下面开始加载）
rules: [
{
test: /\.css$/,
exclude: /node_modules/,
use: [
{
loader: 'style-loader',
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{//*
loader: 'postcss-loader'
}
]
}
]
3. postcss配置
项目根目录新建postcss.config.js文件，里面配置一些插件
module.exports = {
plugins: {
'autoprefixer': {
browsers: '> 5%' //可以都不填，用默认配置
}
}
}
注：也可以在webpack中配置
常用的postcss插件
1. Autoprefixer
前缀补全，全自动的，无需多说
安装：
cnpm install Autoprefixer --save-dev
2. postcss-cssnext
使用下个版本的css语法
安装：
cnpm install postcss-cssnext --save-dev
别忘了在postcss.config.js配置：'postcss-cssnext':{}
cssnext包含了 autoprefixer ，都安装会报错，如下：
Warning: postcss-cssnext found a duplicate plugin ('autoprefixer') in your postcss plugins. This might be inefficient. You should remove 'autoprefixer' from your postcss plugin list since it's already included by postcss-cssnext.
3. postcss-pxtorem
把 px 转换成 rem
官网
安装：
cnpm install postcss-pxtorem --save-dev
配置项：
{
rootValue: 100, // html节点设的font-size大小，由于chrome最小12px，所以基值要设置大写
unitPrecision: 5, // 转rem精确到小数点多少位
propList: ['font', 'font-size', 'line-height', 'letter-spacing'], // 指定转换成rem的属性，支持 * ！
selectorBlackList: [], // str或reg ，指定不转换的选择器，str时包含字段即匹配
replace: true,
mediaQuery: false, // 媒体查询内的px是否转换
minPixelValue: 0 // 小于指定数值的px不转换
}
特殊技巧:不转换成rem
px检测区分大小写，也就是说Px/PX/pX不会被转换，可以用这个方式避免转换成rem
网友评论