Next.js 13版本中PurgeCSS无法生效的问题求助

一、先明确你的路由模式 #

Next.js 13分两种路由模式：

• Pages Router：项目根目录存在pages/文件夹
• App Router：项目根目录存在app/文件夹
  两种模式的配置细节略有差异，先确认自己用的是哪一种。

二、基础配置：PostCSS + PurgeCSS #

首先安装必要依赖：

npm install @fullhuman/postcss-purgecss postcss autoprefixer --save-dev

修改根目录的postcss.config.js，适配Next.js 13的构建逻辑：

module.exports = {
  plugins: [
    'postcss-flexbugs-fixes',
    [
      'postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009'
        },
        stage: 3,
        features: {
          'custom-properties': false
        }
      }
    ],
    // 仅在生产环境启用PurgeCSS
    process.env.NODE_ENV === 'production' ? 
      ['@fullhuman/postcss-purgecss', {
        // 匹配所有可能用到CSS的文件路径
        content: [
          './pages/**/*.{js,jsx,ts,tsx}',
          './components/**/*.{js,jsx,ts,tsx}',
          // 使用App Router则添加该行
          './app/**/*.{js,jsx,ts,tsx}'
        ],
        // 保留Bootstrap框架核心类，避免样式丢失
        safelist: {
          standard: [/^btn-/, /^col-/, /^form-/, /^alert-/, /^modal-/, /^fade$/],
          deep: [/data-bs-.*/]
        },
        // 让PurgeCSS正确识别Next.js中的选择器
        defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
      }] : null,
  ].filter(Boolean)
}

三、Bootstrap额外优化：用SCSS替代预编译CSS #

直接导入bootstrap.min.css会包含大量冗余代码，换成SCSS源文件配合PurgeCSS能进一步压缩体积：

1. 安装Bootstrap（若未安装）：

npm install bootstrap --save

2. 在全局样式文件（如style.css或globals.scss）中替换导入语句：

// 替换原有的 @import './bootstrap.min.css';
@import "bootstrap/scss/bootstrap";

3. 还可禁用不需要的Bootstrap组件，减少初始体积：

// 导入Bootstrap前配置变量，关闭不需要的模块
$enable-carousel: false;
$enable-tooltips: false;
@import "bootstrap/scss/bootstrap";

四、验证PurgeCSS是否生效 #

执行npm run build后，查看.next/static/css/目录下编译后的CSS文件大小，或在浏览器开发者工具的Network面板中查看加载的CSS体积，对比优化前的数值即可确认效果。

五、常见问题排查 #

• 必须在生产环境测试：PurgeCSS仅在npm run build（生产构建）时生效，npm run dev（开发模式）不会触发压缩。
• 放弃next-purgecss：该工具仅支持Next.js 9.3及以下版本，Next.js 10+直接使用@fullhuman/postcss-purgecss即可，旧工具会导致报错。
• 检查内容路径：若组件或页面不在pages/、components/、app/目录下，需将对应路径补充到content数组中，否则PurgeCSS无法扫描到使用的样式。
• 补充safelist：如果出现样式丢失，检查对应类名是否未加入safelist，自定义的Bootstrap类需手动添加。

内容的提问来源于stack exchange，提问作者Manwal