Next.js

Next.js 是一个用于可扩展的生产级应用的 React 框架。全球领先的公司使用 Next.js 构建服务器渲染的应用、静态网站等。

你可以通过在 Next.js 配置中使用 postCSS 插件来在 Next.js 中使用 PurgeCSS。

自定义 PostCSS 配置（Next.js >= 9.3）

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

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

默认情况下，包含 html 和 body 的外层文档位于 nextjs 节点模块内。添加 safelist:["html", "body"] 以确保 PurgeCSS 不会删除这些样式。

将 PurgeCSS 添加到默认配置：

module.exports = {
  "plugins": [
    "postcss-flexbugs-fixes",
    [
      "postcss-preset-env",
      {
        "autoprefixer": {
          "flexbox": "no-2009"
        },
        "stage": 3,
        "features": {
          "custom-properties": false
        }
      }
    ],
    [
      '@fullhuman/postcss-purgecss',
      {
        content: [
            './pages/**/*.{js,jsx,ts,tsx}',
            './components/**/*.{js,jsx,ts,tsx}'
        ],
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
        safelist: ["html", "body"]
      }
    ],
  ]
}

Next.js 插件（Next.js < 9.3）

安装

next-purgecss 需要以下 css next 插件 之一：

选择一个适合你需求的。在以下步骤中，我将使用 next-css，但对于其他 css next 插件 也适用。

例如，安装 next-css 和 next-purgecss：

:::: code-group ::: code-group-item NPM

npm install @zeit/next-css next-purgecss --save-dev

::: ::: code-group-item YARN

yarn add @zeit/next-css next-purgecss --dev

::: ::::

安装完包后，需要编辑 next.config.js。

// next.config.js
const withCss = require("@zeit/next-css");
const withPurgeCss = require("next-purgecss");

module.exports = withCss(withPurgeCss());

选项

`purgeCssEnabled`

默认情况下，next-purgecss 将始终删除未使用的 CSS，无论构建环境如何。你可以通过为 purgeCssEnabled 选项定义一个函数来更改此行为。purgeCssEnabled 函数接收两个参数：

参数	类型	描述
`dev`	`Boolean`	在开发模式（运行 `next`）时为 `true`，在生产模式（运行 `next start`）时为 `false`
`isServer`	`Boolean`	在服务器端编译期间为 `true`，在客户端编译期间为 `false`

// next.config.js
module.exports = withCss(
  withPurgeCss({
    purgeCssEnabled: ({ dev, isServer }) => !dev && !isServer, // 仅为客户端生产构建启用 PurgeCSS
  })
);

`purgeCssPaths`

默认情况下，此插件将扫描 components 和 pages 目录以查找类名。你可以通过定义 purgeCssPaths 来更改此行为。

// next.config.js
module.exports = withCss(
  withPurgeCss({
    purgeCssPaths: [
      "pages/**/*",
      "components/**/*",
      "other-components/**/*", // 同时扫描 other-components 文件夹
    ],
  })
);

`purgeCss`

你可以通过在 next.config.js 中定义 purgeCss 对象来为 PurgeCSS 传递自定义选项。

// next.config.js
module.exports = withCss(
  withPurgeCss({
    purgeCss: {
      whitelist: () => ["my-custom-class"],
    },
  })
);

可用选项列表记录在 purgecss-webpack-plugin 文档中。

注意

purgeCss.paths 将覆盖 purgeCssPaths