PostCSS

默认行为

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

开箱即用，无需任何配置，Next.js 会使用以下转换来编译 CSS

• Autoprefixer 自动为 CSS 规则添加供应商前缀（回溯到 IE11）。
• 跨浏览器 Flexbox 错误 已被修正，使其行为与规范一致。
• 新的 CSS 功能会自动编译以实现 Internet Explorer 11 的兼容性
  • all 属性
  • 断点属性
  • font-variant 属性
  • 间隙属性
  • 媒体查询范围

默认情况下，CSS 网格 和自定义属性（CSS 变量）**不会**编译以支持 IE11。

要为 IE11 编译CSS 网格布局，您可以在 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 模块

无需任何配置即可支持 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,
              },
            },
          ],
        ]
      : [
          // 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,
      },
    },
  },
}