作为前端,我们在项目中会经常看到一个postcss.config.js文件,但它具体做什么的,我们今天来简单聊聊。
1、扮演角色
PostCSS 就是 CSS 界的 Babel,承担css处理器的角色。
2、到底做了什么
1)把源代码(或者符合一定条件的扩展语法)解析为一个自带遍历访问、节点操作接口的树;
2)把语法树输出为代码字符串。
3、常用插件
1)识别一些浏览器尚未支持的语法,转换为浏览器支持的(Autoprefixer、cssnext)
2)在不破坏解析的前提下在一定程度上扩展语法,提供私有的语法糖
3)识别出源码中不符合编码规范之处,输出结果来给 linter 显示(Stylelint)
4)找到并去除冗余代码、将代码压缩为等价且更短的写法(cssnano)
4、优势
写出更短、更标准、更容易维护的代码
5、使用demo
module.exports = (api) => {
return {
plugins: [
require('autoprefixer')({ remove: false })
]
}
}
网友评论