什麼是 PostCSS？

版權聲明

本篇是將文章內容整理濃縮，作為學習之用，下文會一一附上原文連結，如有侵權，經告知之後會立即撤下

引用文章

PostCSS | Summer。桑莫。夏天

後處理器

Postprocessors 的功能

• 加入各家瀏覽器的前綴詞（prefix），例如：-webkit-、-moz-。
• 將先進的功能轉為目前主流瀏覽器所能支援的語法。

Preprocessors vs Postprocessors 的區別

• Preprocessors 預處理:
  • 為了彌補 CSS 在大型專案維護性的不足，CSS 預處理器中新增了變數、混入、繼承、嵌套等寫法，
  • 讓開發者可以更有結構地撰寫簡潔、清晰且好維護的 CSS 程式碼。
• Postprocessors 後處理
  • 加入前綴詞
  • 詳情請看文章
    Sass/SCSS 基本語法介紹，搞懂 CSS 預處理器｜ ALPHA Camp Blog

如何加入 PostCSS？

安裝 PostCSS 與相關套件。

npm install postcss postcss-loader autoprefixer precss --save-dev

在 Webpack 設定檔加入 postcss-loader。

{
  test: /\.css$/,
  use: [
    {
      loader: 'style-loader',
    },
    {
      loader: 'css-loader',
    },
    {
      loader: 'postcss-loader',
    },
  ],
},