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',
]
}(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')()
]
}相信到这里你就会使用 浏览器自动补全工具啦
使用 PostCSS 进行 CSS 处理
PostCSS 本身是一个功能比较单一的工具。它提供了一种方式用 JavaScript 代码来处理 CSS。它负责把 CSS 代码解析成抽象语法树结构（Abstract Syntax Tree，AST），再交由插件来进行处理。
PostCSS_自动处理css3属性前缀
为了浏览器的兼容性，有时候我们必须加入-webkit,-ms,-o,-moz这些前缀。目的就是让我们写的页面在每个浏览器中都可以顺利运行。PostCSS 的主要功能只有两个：第一个就是前面提到的把CSS解析成 JavaScript可以操作的 抽象语法树结构，第二个就是调用插件来处理 AST并得到结果。
开发一个PostCSS插件
postcss会将我们的css生成ast，然后会去遍历它，在遍历的过程中会传给我们一些不同类型的节点对象，我们主要需要了解的几个类型：css ast主要有3种父类型.AtRule: @xxx的这种类型，如@screen
前端Vue框架在PostCSS怎样使用sass
众所周知转换 px 单位的插件有很多，知名的有 postcss-px-to-viewport 和 postcss-pxtorem，前者是将 px 转成 vw，后者是将 px 转成 rem，精简了不常用的配置。将成为vw优先单位使用，以rem作为回退模式。考虑到vw在移动设备的支持度不如rem
零基础理解 PostCSS 的主流程
官网说：“PostCSS，一个使用 JavaScript 来处理CSS的框架”。这句话高度概括了 PostCSS 的作用，但是太抽象了。按我理解，PostCSS 主要做了三件事：
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!