Nuxt 3构建后全局.less样式未生效问题求助

问题诊断 #

你遇到的核心问题是Nuxt3开发环境下全局Less样式正常加载，但生产构建后样式完全缺失，根源大概率是旧RC版本的兼容性bug、不必要的依赖冲突，或是配置细节遗漏。

解决步骤 #

1. 升级Nuxt到稳定版本 #

你当前使用的nuxt: 3.0.0-rc.10是早期候选版本，存在不少CSS预处理器相关的已知问题，优先升级到稳定版：

yarn add nuxt@latest

2. 移除不必要的less-loader #

Nuxt3默认使用Vite作为构建工具，Vite原生支持Less预编译，无需额外安装less-loader，该依赖反而可能引发编译冲突：

yarn remove less-loader

3. 优化Nuxt配置文件 #

确保nuxt.config.ts的CSS配置准确，若需全局注入Less变量/混合，可补充Vite预处理器配置：

export default defineNuxtConfig({
  css: ['@/assets/less/main.less'],
  // 可选：注入全局Less资源（如变量、混合文件）
  vite: {
    css: {
      preprocessorOptions: {
        less: {
          // 示例：全局注入变量文件
          // additionalData: `@import "@/assets/less/variables.less";`
        }
      }
    }
  }
})

4. 检查Less文件语法 #

确认main.less中无语法错误（如未闭合的括号、无效变量定义），编译错误会直接导致样式被跳过生成。

5. 清理缓存并重新构建 #

执行缓存清理后重新构建，避免旧缓存干扰：

yarn cleanup
yarn build
yarn preview

验证结果 #

构建完成后，查看.output/public/_nuxt/css/目录下的编译产物，确认包含你的Less样式对应的CSS内容。

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