摘要：之前有研究过做过假设，在插件列表中，的插件执行顺序自上而下，一切看起来似乎是没有任何问题的。再有摘自深入设计摘自写的姿势这两张图则应该是说明了我之前的假设，插件中的执行顺序自上而下。先来看看一片来自的这段会不会跟这个有关呢，我先埋个伏笔。
图解PostCSS的插件执行顺序
文章其实是一系列的早就写完了. 才发现忘了发在SegmentFault上面, 最早发布于https://gitee.com/janking/Inf...
这次我继续研究PostCSS的插件的执行顺序。
之前有研究过做过假设，在插件列表中，PostCSS的插件执行顺序自上而下，一切看起来似乎是没有任何问题的。
我也看过有关PostCSS解析器的相关文章，有以下一些收获：
摘自：PostCSS 是个什么鬼东西？
当然这张图并没有对Plugin System进行解释。
再有：
摘自：深入PostCSS Web设计
摘自：写CSS的姿势
这两张图则应该是说明了我之前的假设，插件中的执行顺序自上而下。
但是这些资料不明不白的，我决定进一步阅读相关文章找出真相，不过研究过程中，我也依然深思这样一个问题，也许我本不应该纠结这个，因为或许根本没有意义？或者这个工作方式并非与PostCSS本身有关？
于是我又把之前收集的PostCSS的文章翻了一遍，我们再来一个个过一遍。
POSTCSS PLUGIN INSTALLATION EXAMPLE先来看看一片来自smashingmagazine的这段POSTCSS PLUGIN INSTALLATION EXAMPLE
In the array, we can include the necessary require statements that return the plugins and that are then called immediately. If you would like to read more about this concept, look through “Functions as First-Class Citizens in JavaScript” by Ryan Christiani.
会不会跟这个有关呢，我先埋个伏笔。
PostCSS Quickstart Guide: Exploring Pluginsd再来看看另一篇PostCSS Quickstart Guide: Exploring Pluginsd的Plugin Execution Sequence中这段
One of the main considerations you have to make when loading up the array of PostCSS plugins is the order in which you run them. You’ll have to pause and think through your list, determining if one plugin might need to run after another in order to do what you want it to.
鄙人译：有一个非常重要的需要考虑的一点是，当你在加载PostCSS插件数组中顺序就是你执行他们的顺序。因此你有必要好好在这个插件列表这下功夫思考一下，来确定你想要的一个接一个的插件执行顺序。
原文第一句话很复杂，所以英语不好的理解起来可能有些费劲，姑且可以分成以下几段分别翻译再合并One of the main considerations you have to make when loading up the array of PostCSS plugins is the order in which you run them.
然后这段原文后也有示例，大家可以自己看看加深理解和认识。并且也有一个小结论：
The load order for plugins is something that will change with each set of plugins, so you may find you just need to do a little experimentation sometimes to get everything working together nicely.
鄙人译：你所设置的每个插件都会被加载的插件顺序所影响，因此强烈建议你在某些情况下多做些测试来让你的插件们运行的更加完美~
好了看到这里，其实答案大致已经揭晓，也许你觉得这不是很自然的从上而下么，为何作者要纠结这么久还写了这么一篇长篇大论的文章。如果你还没看过之前我为何纠结这个顺序问题，可以看看:
PostCSS自学笔记（二）【插件篇】#CSSNANO
PostCSS自学笔记（二）【番外篇一】
结论其实，关于顺序的疑问我觉得差不多就此打住，也许其中的确有些奇怪的现象，但是这个基本不影响或者说没有追究其根本的意义，或许真要打破沙锅问到底就要发邮件给PostCSS作者了。而作为普通开发人员，也许没有必要花太多精力去研究这个，我们知道PostCSS插件的顺序一般来说是从上往下执行的，不要犯低级的顺序错误（例如import写在列表末尾），大部分场景都会得到我们想要的结果了
（突然想起来了，前面埋了个伏笔其实跟它没啥关系，所以不多做文章了~不过作为课外阅读，多了解下也是棒棒哒！）
其他关于我个人的PostCSS一系列学习, 介绍及总结, 有兴趣可以参阅:
PostCSS自学笔记（一）【安装使用篇】
PostCSS自学笔记（二）【插件篇】
PostCSS自学笔记（二）【番外篇一】
PostCSS自学笔记（二）【番外篇二】
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115666.html
摘要：通过配置规则和单位使用或来解决。其他关于我个人的一系列学习介绍及总结有兴趣可以参阅自学笔记一安装使用篇自学笔记二插件篇自学笔记二番外篇一自学笔记二番外篇二 利用PostCSS解决移动端REM适配问题 上一期有提到结合postcss-px2rem插件来处理移动端适配的方案，以及相关的避坑方法，之后总觉得这个解决方案问题太多，也就诞生了另一套方案运用postcss-pxtorem插件来进行...
摘要：而则可制定个人需求的一套解决方案仅安装需要的插件。迫不及待的你已经等不及安装使用了吧。安装及使用一般是结合自动化工具使用，如果要单独使用可以安装，这里我先对的安装使用讲解下。接下来说点实际的，如何利用结合自动化工作在项目中使用。 PostCSS介绍 PostCSS是一个利用JS插件来对CSS进行转换的工具，这些插件非常强大，强大到无所不能。其中，Autoprefixer就是众多Post...
摘要：本期主要介绍以下几个插件和几个坑和坑这个就不用多说了，必装插件之一。看似写法没有任何问题。编译后的结果那么这样就没有问题了。 PostCSS常用插件介绍 继上一次PostCSS学习指南（一）后，渐渐开始在项目中应用。 这次决定主要讲解一些个人认为非常有帮助的PostCSS插件。 本期主要介绍以下几个插件和几个坑 autoprefixer postcss-partial-import...
摘要：今日份重点命名规范注释关键字关键字总结命名规范规范的包名名字管理是所有编程语言都必须重视的一个问题。比如说百度，其域名为，那么其对应的应用的包名前缀就应该为。是谁这么大牌总结本文主要介绍了中的命名规范注解关键字关键字等内容。 欢迎关注我的微信公众号，共同打牢Java的基础，向着远方进击 showImg(https://segmentfault.com/img/bVboaBO?w=129...
摘要：一坑非常吃硬件，版本最低的硬件内存也是需要。之前进行环境开发，装的是虚拟机，但是虚拟机最高支持的内存是目前我的电脑是这样。三坑幸亏公司有多余的机器，让我来装一下系统。常见的盘启动制作，没有制作的，只能制作，很致命。 一、坑1 EOS非常吃硬件，v1.5版本最低的硬件内存也是需要7G。之前进行ubuntu环境开发，装的是虚拟机VMware Workstation Pro，但是虚拟机最高支...
阅读 1051·2021-11-24 09:39
阅读 3582·2021-11-22 13:54
阅读 2544·2021-10-11 10:59
阅读 777·2021-09-02 15:40
阅读 1027·2019-08-30 15:55
阅读 1045·2019-08-30 13:57
阅读 2305·2019-08-30 13:17
阅读 3025·2019-08-29 18:32
