PostCSS

預設行為

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

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

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

預設情況下，CSS Grid 和 自訂屬性 (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,
      },
    },
  },
}