vite中导入全局样式变量（less、sass）

1、先新建vars.less文件，定义基础样式变量
2、在vite.config.ts 下添加配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname,'src')
    },
  },
  css: {
    preprocessorOptions: {
      less: {
        additionalData: '@import "@/assets/styles/vars.less";', // 引入多个文件以；分割
      }
    }
  },
  // 配置代理
  server: {
    proxy: {
      '/api': {
        target: '',
        changeOrigin:true
      }
    }
  }
})

引入sass，修改preprocessorOptions代码如下即可

 css: {
      preprocessorOptions: {
        scss: {
          additionalData: '@use "@/assets/styles/vars.scss" as *;'
        }
      }
    },