摘要:之前有研究過做過假設,在插件列表中,的插件執行順序自上而下,一切看起來似乎是沒有任何問題的。再有摘自深入設計摘自寫的姿勢這兩張圖則應該是說明了我之前的假設,插件中的執行順序自上而下。先來看看一片來自的這段會不會跟這個有關呢,我先埋個伏筆。
圖解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自學筆記(二)【番外篇二】
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/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,但是虛擬機最高支...
閱讀 1059·2021-11-24 09:39
閱讀 3594·2021-11-22 13:54
閱讀 2552·2021-10-11 10:59
閱讀 788·2021-09-02 15:40
閱讀 1034·2019-08-30 15:55
閱讀 1053·2019-08-30 13:57
閱讀 2311·2019-08-30 13:17
閱讀 3031·2019-08-29 18:32