如何在Vite2中配置实现CSS内联，不单独生成独立CSS文件

配置错误原因 #

• 第一次配置层级错误：extract是Vite顶层css配置项的参数，不属于postcss配置范畴，放在css.postcss下不会生效。
• 第二次配置逻辑冲突：Vite内置了完整的postcss、less预处理器处理流程，手动在rollupOptions中新增postcss插件会和内置逻辑冲突，导致less文件无法被正确解析。

正确配置方式 #

1. 先安装less依赖（Vite内置less支持但需要手动安装less本体）：

npm install less -D

2. 修改vite.config.js配置：

import { defineConfig } from 'vite'

export default defineConfig({
  // 其他原有配置保留
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true
      }
    },
    // 配置不提取CSS文件，内联到JS中
    extract: false
  },
  build: {
    // 关闭CSS代码拆分，所有样式合并内联
    cssCodeSplit: false
  }
})

配置完成后重新打包，不会生成独立的.css文件，所有样式会被内联到JS产物中，运行时自动注入到页面的style标签生效。

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