Skip to main content

PostCSS

Examples

默认行为​

¥Default Behavior

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

¥Next.js compiles CSS for its built-in CSS support using PostCSS.

Next.js 开箱即用，无需配置，即可通过以下转换来编译 CSS：

¥Out of the box, with no configuration, Next.js compiles CSS with the following transformations:

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

¥By default, CSS Grid and Custom Properties (CSS variables) are not compiled for IE11 support.

要为 IE11 编译 CSS 网格布局，你可以将以下注释放在 CSS 文件的顶部：

¥To compile CSS Grid Layout for IE11, you can place the following comment at the top of your CSS file:

/* autoprefixer grid: autoplace */

你还可以通过使用如下所示的配置来配置 autoprefixer，从而在整个项目中启用 IE11 对 CSS 网格布局 的支持（折叠）。有关详细信息，请参阅下面的 "自定义插件"。

¥You can also enable IE11 support for CSS Grid Layout in your entire project by configuring autoprefixer with the configuration shown below (collapsed). See "Customizing Plugins" below for more information.

Click to view the configuration to enable CSS Grid Layout
{
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009",
          "grid": "autoplace"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ]
  ]
}

CSS 变量不会被编译，因为它是 不可能安全地这样做。如果必须使用变量，请考虑使用诸如 Sass 变量 之类的变量，这些变量会被 Sass 编译掉。

¥CSS variables are not compiled because it is not possible to safely do so. If you must use variables, consider using something like Sass variables which are compiled away by Sass.

自定义目标浏览器​

¥Customizing Target Browsers

Next.js 允许你通过 浏览器列表 配置目标浏览器（针对 自动前缀器 和编译的 css 功能）。

¥Next.js allows you to configure the target browsers (for Autoprefixer and compiled css features) through Browserslist.

要自定义浏览器列表，请在 package.json 中创建 browserslist 键，如下所示：

¥To customize browserslist, create a browserslist key in your package.json like so:

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

你可以使用 browsersl.ist 工具来可视化你的目标浏览器。

¥You can use the browsersl.ist tool to visualize what browsers you are targeting.

CSS 模块​

¥CSS Modules

无需配置即可支持 CSS 模块。要为文件启用 CSS 模块，请将该文件重命名为扩展名 .module.css。

¥No configuration is needed to support CSS Modules. To enable CSS Modules for a file, rename the file to have the extension .module.css.

你可以了解更多有关 Next.js 的 CSS 模块支持在这里 的信息。

¥You can learn more about Next.js' CSS Module support here.

自定义插件​

¥Customizing Plugins

警告：当你定义自定义 PostCSS 配置文件时，Next.js 完全禁用 默认行为。请务必手动配置你需要编译的所有功能，包括 自动前缀器。你还需要手动安装自定义配置中包含的任何插件，即 npm install postcss-flexbugs-fixes postcss-preset-env。

¥Warning: When you define a custom PostCSS configuration file, Next.js completely disables the default behavior. Be sure to manually configure all the features you need compiled, including Autoprefixer. You also need to install any plugins included in your custom configuration manually, i.e. npm install postcss-flexbugs-fixes postcss-preset-env.

要自定义 PostCSS 配置，请在项目的根目录中创建一个 postcss.config.json 文件。

¥To customize the PostCSS configuration, create a postcss.config.json file in the root of your project.

这是 Next.js 使用的默认配置：

¥This is the default configuration used by 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 键读取。

¥Good to know: Next.js also allows the file to be named .postcssrc.json, or, to be read from the postcss key in package.json.

还可以使用 postcss.config.js 文件配置 PostCSS，当你想根据环境有条件地包含插件时，这非常有用：

¥It is also possible to configure PostCSS with a postcss.config.js file, which is useful when you want to conditionally include plugins based on environment:

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。

¥Good to know: Next.js also allows the file to be named .postcssrc.js.

不要使用 require() 导入 PostCSS 插件。插件必须以字符串形式提供。

¥Do not use require() to import the PostCSS Plugins. Plugins must be provided as strings.

很高兴知道：如果你的 postcss.config.js 需要支持同一项目中的其他非 Next.js 工具，则必须使用可互操作的基于对象的格式：

¥Good to know: If your postcss.config.js needs to support other non-Next.js tools in the same project, you must use the interoperable object-based format instead:

module.exports = {
  plugins: {
    'postcss-flexbugs-fixes': {},
    'postcss-preset-env': {
      autoprefixer: {
        flexbox: 'no-2009',
      },
      stage: 3,
      features: {
        'custom-properties': false,
      },
    },
  },
}