Vite css处理（模块module、sass less预处理、获取CSS代码字符串）

// 导入Vite API
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// 导入处理CSS的插件，例如sass和less
import styleImport from 'vite-plugin-style-import'
 
// 导入获取CSS代码字符串的插件
import css from 'rollup-plugin-css-bundle'
 
// 配置Vite插件
export default defineConfig({
  plugins: [
    vue(),
    styleImport({
      libs: [
        {
          libraryName: 'ant-design-vue',
          esModule: true,
          resolveStyle: (name) => {
            return `ant-design-vue/es/${name}/style/index`
          },
        },
      ],
    }),
    css({ output: 'bundle.css' }),
  ],
  // CSS预处理器配置
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      },
      less: {
        additionalData: `@import "@/styles/variables.less";`
      }
    }
  }
})

在这个配置中，我们使用了vite-plugin-style-import插件来自动导入所需的ant-design-vue组件的样式。同时，我们通过css配置项指定了SCSS和LESS的预处理器选项，并通过additionalData导入了全局样式变量文件。最后，我们使用了rollup-plugin-css-bundle插件来获取打包后的CSS代码字符串，并可以将其输出到指定的文件中。