PostCSS

預設行為

Next.js 使用 PostCSS 編譯其內建 CSS 支援的 CSS。

開箱即用，無需任何設定，Next.js 使用以下轉換編譯 CSS

• Autoprefixer 自動將供應商前綴新增至 CSS 規則（回溯至 IE11）。
• 跨瀏覽器 Flexbox 錯誤 已修正為表現得像 規格 一樣。
• 新的 CSS 功能會自動編譯以支援 Internet Explorer 11
  • all 屬性
  • Break 屬性
  • font-variant 屬性
  • Gap 屬性
  • 媒體查詢範圍

預設情況下，CSS Grid 和 自訂屬性 (CSS 變數) 不會針對 IE11 支援進行編譯。

若要針對 IE11 編譯 CSS Grid Layout，您可以將以下註解放在 CSS 檔案的頂端

/* autoprefixer grid: autoplace */

您也可以透過設定 autoprefixer 和下方顯示的組態（已摺疊），在整個專案中啟用 CSS Grid Layout 的 IE11 支援。請參閱下方「自訂外掛程式」以取得更多資訊。

{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009",
          "grid": "autoplace"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

CSS 變數不會編譯，因為無法安全地執行此操作。如果您必須使用變數，請考慮使用類似 Sass 變數 之類的項目，這些變數會由 Sass 編譯掉。

自訂目標瀏覽器

Next.js 允許您透過 Browserslist 設定目標瀏覽器（用於 Autoprefixer 和編譯的 css 功能）。

若要自訂 browserslist，請在您的 package.json 中建立 browserslist 鍵，如下所示

{
  "browserslist": [">0.3%", "not dead", "not op_mini all"]
}

您可以使用 browsersl.ist 工具視覺化您要鎖定的瀏覽器。

CSS Modules

支援 CSS Modules 不需要任何設定。若要為檔案啟用 CSS Modules，請重新命名檔案，使其副檔名為 .module.css。

您可以在此處深入瞭解 Next.js 的 CSS Module 支援。

自訂外掛程式

警告：當您定義自訂 PostCSS 設定檔時，Next.js 會完全停用預設行為。請務必手動設定您需要編譯的所有功能，包括 Autoprefixer。您也需要手動安裝自訂組態中包含的任何外掛程式，例如 npm install postcss-flexbugs-fixes postcss-preset-env。

若要自訂 PostCSS 組態，請在專案根目錄中建立 postcss.config.json 檔案。

這是 Next.js 使用的預設組態

{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

要知道的好事：Next.js 也允許檔案命名為 .postcssrc.json，或從 package.json 中的 postcss 鍵讀取。

也可以使用 postcss.config.js 檔案設定 PostCSS，當您想要根據環境有條件地包含外掛程式時，這非常有用

module.exports = {
  plugins:
    process.env.NODE_ENV === 'production'
      ? [
          'postcss-flexbugs-fixes',
          [
            'postcss-preset-env',
            {
              autoprefixer: {
                flexbox: 'no-2009',
              },
              stage: 3,
              features: {
                'custom-properties': false,
              },
            },
          ],
        ]
      : [
          // No transformations in development
        ],
}

要知道的好事：Next.js 也允許檔案命名為 .postcssrc.js。

請勿使用 require() 匯入 PostCSS 外掛程式。外掛程式必須以字串形式提供。

要知道的好事：如果您的 postcss.config.js 需要在同一個專案中支援其他非 Next.js 工具，您必須改用可互通的物件式格式

module.exports = {
  plugins: {
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
}