Sponsor
ntab.devntab.dev 提升效率的新标签页组件
点击查看
Menu

PostCSS

默认行为

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

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

默认情况下,CSS 网格自定义属性(CSS 变量)不会为 IE11 编译支持。

要为 IE11 编译 CSS 网格布局,你可以在 CSS 文件顶部放置以下注释:

/* autoprefixer grid: autoplace */

你还可以通过配置 autoprefixer 为整个项目启用 CSS 网格布局的 IE11 支持,配置如下(折叠)。 请参阅下面的"自定义插件"获取更多信息。

点击查看启用 CSS 网格布局的配置
postcss.config.json
{
  "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 键,如下所示:

package.json
{
  "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 使用的默认配置:

postcss.config.json
{
  "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,这在你想根据环境有条件地包含插件时很有用:

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