Postcss是什么？

Postcss 是一个使用 js 插件来转换样式的工具，Postcss 的插件会检查你的css。

Postcss解决了什么？

通过在 PostCSS 这个工具上，我们能够使用JS开发一些插件，为 CSS 提供额外的功能，来处理我们的CSS。

  • autoprefixer：这个插件会添加浏览器的前缀，免去写-webkit-这样无聊的兼容代码。
  • postcss-px-to-viewport： 可以自动转换 px 来进行不用屏幕不同宽度大小的适配。
  • Postcss-sorting：可以自动对Css属性依照设定的规则进行排序。
  • …

Postcss原理

为什么poctcss能够完成这些功能呢？
通过阅读分析源码，得知。

  • 我们在构建项目的时候，通过webpack会把css文件的内容传送给postcss-loader；
  • postcss-loader会解析postcss.config中的插件，传输给 Postcss；
  • Postcss 会解析传入的css，将其转换为一个AST，然后通过各种不同的插件来对这个AST进行操作，最终序列化新的 css，
  • 最后将结果返回到 postcss-loader，进行 webpack 下一个 loader 的操作。

image.png

参考文档