Less和Sass主要解决一个模块化的问题，但是也有一个全局风格污染问题。今天我个人分享一些关于PostCSS的个人理解。

PostCss是由Autoprefixer的开发者Andrey Sitnik开发的。最初是通过JavaScript处理CSS的方法。

可以理解为一个插件系统(类似于css领域的webpack)，它只是一个API，而作为API，它可以创建任何需要的插件和工具。

PostCss有两个概念:前处理器和后处理器

Sass，Less和Stylus都属于预处理器的范畴。css的代码是按照预处理程序的语法编写的，最后由预处理程序的编译器编译成一个传统的css，称为预处理程序。

后处理器(Post-processor)是指我们写完css代码后，留给它去处理，加入一些必要的属性，比如典型的CSS前缀，会加入一些浏览器前缀。

PostCSS is a tool for transformimg CSS with JS plugins.PostCSS是一个用JS插件转换CSS的工具。

这些插件可以支持变量和混合、transpile未来CSS语法、内联图像等等。

翻译的意思是PostCss是用JS插件转换Css的工具。这些插件可以支持变量和混合，转换成未来的css语法，内联图像等等。我们可以把PostCss想象成一个管道，然后我们可以在管道里到处放一些插件，然后通过管道的Css就会被插件处理。实际上，PostCss将Css代码转换成抽象的语法结构AST，这是一个对象的树，然后方便插件处理。

PostCss是一个插件系统，所以既不是前处理器，也不是后处理器，类似于Css领域的webpack、Grunt、Gulp的集成。其功能是集成前处理器和后处理器。

关于PostCss的使用，一般不单独使用，是现有构建工具的集合；例如网络包、咕噜声和吞咽声。

使用最广泛的PostCss是与webpack的集成。

1构建环境

npm init

npm init

06-18-01

n install web pack web pack-CLI-save-dev -save表示依赖项将保存在package.json文件中，然后-dev将保存在devDependencies中。

注意:“脚本”:{ " bulid ":" webpack-config webpack.config.js " }表示web pack正在运行，-config表示指定配置文件，web pack . config . js配置文件名。 配置webpack.config.js

06-18-02

06-18-03

Nmrunbuild 分隔css

要看到一个PostCss打包的效果，需要把Css分开。

要安装的插件:

n install CSS-loader-save-dev n install extract-text-web pack-plugin @ next-save-dev n install post CSS-loader-save-dev post CSS常用插件介绍

自动添加浏览器前缀，这个插件是一个post css插件，它根据我能使用吗来解析css，并给它添加浏览器厂商前缀。

cani use(https://www.caniuse.com)是一个网站，在这个网站上，我们可以通过我们使用的一个属性来了解浏览器的支持。

n install auto pixer-save-dev 在安装后被添加到webpack.config.js下的加载程序中。

强制开发者按照team css规范编写css样式的工具，类似于eslint(JS规范)。

这是一个强大的现代linter，它可以帮助你避免错误，并在你的风格中执行约定。为什么强大？因为它的特点:

关于它的更多信息可以在官网(https://stylelint.io/)找到。

npm安装post CSS-CSS next-save-dev post CSS-modules

以模块化的方式实现Css侧重于解决样式冲突。

npm安装post CSS-modules-save-dev lost

强大的PostCSS网格系统

文章npinstalllost-save-dev 主要介绍了PostCss的定位，并介绍了PostCss的几个插件:autoprefixer、postcss-cssnext、postcss-modules、lost、stylelint。这篇文章可能有许多缺点。读书的朋友可以给我一点提示或者私下告诉我有没有错误。O(∩_∩)O谢谢。