本文從一段開始postcss-loader配置 Expand Chat PostCSS 及其相關外掛程式。 是的git clone原始碼檢視示例效果。
， postcss 選項 postcssoptions： ， 支援階段 3 功能階段： 3， }規範化是根據目標瀏覽器列表設定引入的CSS 中所需的部分是 postcssnormalize（）， require（'postcss-normalize')。PostCSS 是乙個允許你使用 JS 外掛程式轉換樣式的工具，它獲取乙個 CSS 檔案並將其解析成乙個抽象語法樹（AST tree），並提供一系列 API 供外掛程式用來分析和修改 CSS 規則，例如自動新增相容 CSS 的字首。
使用 postcss 是一系列外掛程式的組合，這些外掛程式在 webpack 中傳遞postcss-loader使用外掛程式，而 postcss 本身可以使用配置檔案設定外掛程式選項（推薦postcss.config.js
// postcss.config.jsmodule.exports = ]，將引數傳遞給外掛程式'postcss-preset-env', ]
postcss-loader可以設定在postcssoptions.config為true允許postcss-loader使用配置檔案中的選項，配置檔案中的選項將與載入器選項合併，載入器選項具有更高的優先順序，但不建議同時使用配置檔案和載入器選項。
// webpack.config.jsmodule.exports = ,此外掛程式修復了與 flex 布局相關的 flexbugs 中列出的一些錯誤。 例如，bug 81.答：IE 10-11 將被忽略
flex縮寫calc()函式（固定在邊緣），例如flex: 0 0 calc(100%/3)它在 IE 中不起作用。
經線postcss-flexbugs-fixes處理後，它變為：
.foo自動新增與瀏覽器相容的字首（例如
-webkit-(chrome，safari)、-moz-(firefox)、-ms-(ie)、-o-(opera)）。例如，以下 **：
::placeholder經線
postcss-flexbugs-fixes處理後，它變為：
::-moz-placeholder :-ms-input-placeholder ::placeholderW3C 制定 CSS 標準的過程複雜而漫長，官方的 W3C 標準通常要經歷以下幾個階段：
工作草案（第 0 階段）：一系列草案將在公眾和 W3C 成員的意見和問題的基礎上提交，由工作組解決。 最終工作草案（第一階段）：工作組已經完成了工作，並要求公眾和 W3C 成員提交最終意見和問題。 同樣，工作組必須處理這些反饋。 如果發生這種情況，可能有必要回到工作草案階段。 候選推薦（第 2 階段）：在解決最終工作草案階段的所有問題後，候選推薦階段將開始，此時規範可以被認為是穩定的並準備好進行試驗實施。 工作組必須將實現的反饋整合到規範中。 同樣，如果出現這種情況，有必要返回工作草案階段。 推薦標準（第 3 階段）：進行最終審查，如果沒有事故，規範將進入推薦標準階段。 在此階段，W3C 主管將正式要求 W3C 成員審查推薦的標準。 第 4 階段：根據審查情況，該規範可能會成為 W3C 推薦標準，在稍作改動後返回工作草案階段，或者完全從 W3C 計畫中刪除。 一旦技術規範成為推薦標準，它就會成為 W3C 的官方標準。 例如，乙個::placeholder在經歷上述過程的過程中，瀏覽器提前準備了自己的實現供開發者使用，但是他們擔心最終的標準會發生變化，所以瀏覽器會在屬性中新增乙個私有字首來支援新的屬性。
但是，開發人員並不清楚哪些 CSS 屬性需要在相容模式下編寫，哪些私有字首需要應用。 此最新資訊可通過 can i use** 獲取，該資訊可查詢各瀏覽器和裝置的支援資訊以獲取屬性：
在日常發展中，我們通常處於：package.json#browserslist字段 （或.browserslistrcfile） 指定我們期望定位的瀏覽器列表，例如create react app中等：
autoprefixer外掛程式顯示package.json#browserslist配置資訊，並將其與資料一起使用，以確定需要新增哪些CSS屬性以及需要新增哪些與瀏覽器相容的字首。 AutoPrefixer 配置選項。 目標瀏覽器列表。
建議通過package.jsonbrowserslist欄位或建立.browserslistrc檔案。 此配置可以在不同的前端工具之間共享，例如本文中的工具autoprefixerpostcss-preset-envpostcss-normalize可以使用package.json或.browserslistrc在檔案中配置目標瀏覽器列表。
如果未設定browserslist使用預設瀏覽器配置defaults> 0.5%, last 2 versions, firefox esr, not dead，這意味著：
： 大於 05%。last 2 versions：每個瀏覽器的最後 2 個版本。 firefox esr：Firefox擴充套件支援的最新版本。 not dead：排除 24 個月未獲得官方支援或更新的瀏覽器，更多配置選項可以在這裡找到。 package.json#browserslist跟.browserslistrc配置方法：
package.json
.browserslistrc檔案配置：
defaultsnot ie 11maintained node versionsbrowserslist_env或node_env變數 如果未宣告查詢，則選擇查詢（例如process.env.node_env = 'development'）會先去找productionpackage.json
.browserslistrc檔案配置：
[production]>0.2%not deadie 10[development]last 1 chrome versionlast 1 firefox versionlast 1 safari versionpostcss-preset-env允許您使用將來的（尚未推薦的）CSS 功能，該外掛程式將根據您的目標瀏覽器或執行時環境新增所需的 polyfills。
在沒有任何配置選項的情況下，postcss preset env 預設處於啟用狀態stage 2階段 CSS 功能和對所有瀏覽器的支援。
常用選項：
stage：此選項啟用指定階段的 CSS 屬性並填充 polyfill。 features：此選項通過 [id] 啟用或禁用特定的 polyfills、可選 ID 列表、任何未顯式啟用或禁用的 polyfillsfeatures這一切都是這樣stage選項確定。 browsers：根據您需要支援的目標瀏覽器確定需要哪些 polyfill。 但通常建議在通常package.json#browserslist字段 （或.browserslistrc檔案）。如果指定了無效的 browserslist 配置，則預設的 browserslist 將用於查詢 （> 0.5%, last 2 versions, firefox esr, not dead
postcss-loader[ require（'postcss-preset-env'），指定外掛程式選項，瀏覽器：'last 2 versions'，所有瀏覽器的最後 2 個版本 }，
postcss-preset-env包括autoprefixer的外掛程式，通過autoprefixer指定的選項autoprefixer外掛程式的配置項。
[ require('postcss-preset-env'),postcss-normalize它可以使用browserslist（目標瀏覽器列表）設定介紹normalize.css或sanitize.css所需的部分。 normalize.css使瀏覽器能夠更一致地呈現所有元素並符合現代標準。 與重置 CSS 樣式的方式不同，它保留了一些有用的預設樣式。
@import "normalize.css";
browserslist為ie >= 9什麼時候：
audio,video img
browserslist為ie >= 10什麼時候：audio跟video未引入元素的樣式宣告：
img配置選項：該外掛程式將 CSS 提取到乙個單獨的檔案中，為每個包含 CSS 的 JS 檔案建立乙個 CSS 檔案，並支援按需載入 CSS 和 SourceMaps，需要在 Webpack 4 中使用。
const minicssextractplugin = require("mini-css-extract-plugin");module.exports = , plugins: [new minicssextractplugin()]有關更詳細的用法，請參閱此處。 postcss-loader configpostcsspostcss flexbugs fixespostcss preset envbrowserslistminicssextractplug