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

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

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`	`布尔值`	在开发模式（运行 `next`）中为 `true`，或在生产模式（运行 `next start`）中为 `false`
`isServer`	`布尔值`	服务器端编译期间为 `true`，或客户端编译期间为 `false`

// next.config.js
module.exports = withCss(
  withPurgeCss({
    purgeCssEnabled: ({ dev, isServer }) => !dev && !isServer, // Only enable PurgeCSS for client-side production builds
  })
);

`purgeCssPaths`

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

// next.config.js
module.exports = withCss(
  withPurgeCss({
    purgeCssPaths: [
      "pages/**/*",
      "components/**/*",
      "other-components/**/*", // also scan other-components folder
    ],
  })
);

`purgeCss`

你可以通过在 next.config.js 中定义 purgeCss 对象，将自定义选项传递给 PurgeCSS在新窗口中打开。

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

可用选项列表在 purgecss-webpack-plugin 文档在新窗口中打开中进行了说明。

警告

purgeCss.paths 将覆盖 purgeCssPaths

# Next.js

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

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

# 安装

# 选项

# purgeCssEnabled

# purgeCssPaths

# purgeCss