PostCSS

默认行为

Next.js 使用 PostCSS 编译其内置 CSS 支持所需的 CSS。

在无配置情况下，Next.js 默认会对 CSS 进行以下转换：

• Autoprefixer 自动为 CSS 规则添加浏览器前缀（支持到 IE11）。
• 修复 跨浏览器 Flexbox 错误以符合规范标准。
• 自动编译新 CSS 特性以兼容 Internet Explorer 11：
  • all 属性
  • Break 属性
  • font-variant 属性
  • Gap 属性
  • 媒体查询范围

默认情况下，CSS 网格布局和自定义属性（CSS 变量）不会为 IE11 进行编译。

要为 IE11 编译 CSS 网格布局，可在 CSS 文件顶部添加以下注释：

/* autoprefixer grid: autoplace */

您也可以通过下方配置（点击展开）在整个项目中启用 IE11 对 CSS 网格布局的支持。更多信息请参阅下方的"自定义插件"章节。

{
  "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 特性编译）。

在 package.json 中添加 browserslist 字段进行配置：

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

可使用 browsersl.ist 工具可视化查看目标浏览器范围。

CSS 模块

无需额外配置即可支持 CSS 模块。只需将文件扩展名改为 .module.css 即可启用 CSS 模块功能。

了解更多关于 Next.js 的 CSS 模块支持。

自定义插件

警告：当自定义 PostCSS 配置文件时，Next.js 会完全禁用默认行为。需手动配置所有需要的编译特性，包括 Autoprefixer。同时需手动安装配置中包含的所有插件，例如 npm install postcss-flexbugs-fixes postcss-preset-env。

在项目根目录创建 postcss.config.json 文件来自定义 PostCSS 配置：

{
  "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 进行配置，这在需要根据环境条件引入插件时非常有用：

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,
      },
    },
  },
}