如何在Nuxt 2.x中自定义extractCSS并添加排除规则？

Nuxt 2 原生的 extractCSS 配置确实没有提供直接排除特定组件CSS的选项，但可以通过以下几种方案实现你的需求：

方案一：手动内联关键组件CSS #

把需要在JS运行前就加载的组件CSS单独抽离出来，直接内联到页面头部或者单独作为静态文件引入：

• 在 nuxt.config.js 的 head 配置里添加内联样式：

export default {
  head: {
    style: [
      {
        cssText: `/* 这里粘贴需要提前加载的组件CSS代码 */`,
        type: 'text/css'
      }
    ]
  }
}

• 也可以把这部分CSS存成单独文件放在 static 目录，然后通过 link 标签引入：

export default {
  head: {
    link: [
      { rel: 'stylesheet', href: '/critical-components.css' }
    ]
  }
}

需要注意的是，这种方式需要你手动维护这部分CSS，确保和组件内的样式同步更新。

方案二：自定义Webpack配置实现排除 #

Nuxt 2 的 extractCSS 底层用的是 mini-css-extract-plugin，可以通过修改Webpack配置来添加排除规则：

• 在 nuxt.config.js 的 build.extend 方法里调整插件配置：

export default {
  build: {
    extend(config, { isDev, isClient }) {
      // 只在生产环境的客户端构建中生效
      if (isClient && !isDev) {
        // 找到CSS提取插件
        const cssExtractPlugin = config.plugins.find(plugin => 
          plugin.options?.filename?.includes('css')
        )
        if (cssExtractPlugin) {
          // 添加排除规则，这里的正则要匹配你需要排除的组件文件路径
          cssExtractPlugin.options.exclude = /components\/YourCriticalComponent\.vue$/
        }
      }
    }
  }
}

这种方式需要你对Webpack和Nuxt的构建流程有一定了解，正则规则要根据实际组件路径调整，避免误排除其他样式。

方案三：用Critical CSS工具自动处理 #

如果不想手动维护，可以用 critical 这类工具自动提取首屏关键CSS并内联：

• 先安装依赖：npm install critical --save-dev
• 在Nuxt的构建钩子（比如 generate:after）中添加逻辑，运行工具提取并内联关键CSS。
  这种方式适合需要自动识别首屏所需样式的场景，无需手动指定组件。

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