如何在 Next.js 中配置 PostCSS

預設行為

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

在沒有額外配置的情況下，Next.js 預設會對 CSS 進行以下轉換：

• Autoprefixer 自動為 CSS 規則添加供應商前綴 (支援到 IE11)。
• 修正 跨瀏覽器的 Flexbox 錯誤 以符合 規範標準。
• 自動編譯新 CSS 功能以確保 Internet Explorer 11 相容性：
  • all 屬性
  • Break 屬性
  • font-variant 屬性
  • Gap 屬性
  • 媒體查詢範圍

預設情況下，CSS Grid 和 自訂屬性 (Custom Properties) (CSS 變數) 不會被編譯 以支援 IE11。

若要為 IE11 編譯 CSS Grid 佈局，您可以在 CSS 文件頂部加入以下註解：

/* autoprefixer grid: autoplace */

您也可以透過下方折疊區塊所示的配置，在整個專案中啟用 IE11 對 CSS Grid 佈局 的支援。更多資訊請參閱下方的「自訂插件」章節。

{
  "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 模組

無需額外配置即可支援 CSS 模組。要為文件啟用 CSS 模組，請將文件副檔名重新命名為 .module.css。

您可以在這裡了解更多關於 Next.js 的 CSS 模組支援。

自訂插件

警告：當您定義自訂的 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,
              },
            },
          ],
        ]
      : [
          // 開發環境不進行轉換
        ],
}

須知：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,
      },
    },
  },
}