Nuxt3构建阶段CSS无法提取问题求助（原配置适用于Nuxt2）

原因分析 #

你之前尝试的所有配置都是针对Nuxt2（基于Webpack4）的，但Nuxt3有两点核心变化导致旧配置失效：

1. Nuxt3默认采用Vite作为构建工具，替代了Nuxt2默认的Webpack4，Vite的CSS配置逻辑和Webpack完全不同
2. 即使手动切换到Webpack5，Nuxt3的Webpack配置结构也已重构，extractCSS这类旧配置字段已被废弃

解决方案 #

根据你使用的构建工具（Vite/Webpack5），选择对应配置：

1. 默认Vite构建工具 #

在nuxt.config.ts（或nuxt.config.js）中添加Vite的CSS提取配置：

export default defineNuxtConfig({
  vite: {
    css: {
      // 启用CSS提取到独立文件
      extract: true,
      // 以下为可选配置（按需添加）
      devSourcemap: true, // 开发环境生成CSS Sourcemap
      preprocessorOptions: {
        // 示例：全局注入SCSS变量
        // scss: { additionalData: '@import "@/assets/styles/globals.scss";' }
      }
    }
  }
})

2. 切换为Webpack5构建工具 #

如果需要继续使用Webpack，先指定构建工具，再配置CSS提取：

export default defineNuxtConfig({
  builder: 'webpack', // 切换为Webpack构建
  webpack: {
    css: {
      extract: true // 启用CSS提取
    }
  }
})

验证方式 #

执行构建命令（nuxt build/nuxi build/npm run build）后，查看.output/public/_nuxt目录，会生成带有哈希值的独立CSS文件（如app.abc123.css），说明配置生效。

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