vite配置less export功能

第一步：vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
// https://vitejs.dev/config/

export default ({ mode }) => {
  console.log(mode)
  return defineConfig({
    plugins: [vue()],
    resolve: {
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue','less'],
      alias: {
        '@': path.resolve(__dirname, 'src'),
      },
      base: './',
    },
    css:{
    //这里配置是否开启js  less变量
      preprocessorOptions:{
        less:{
          javascriptEnabled: true
        }
      }
    },
    server: {
      proxy: {
        '^/api': {
          target: 'https://api.imooc-admin.lgdsunday.club/',
          changeOrigin: true,
        },
      },
    },
  })
}

第二步：variables.module.less

一定要 xxx.module.less

@menuText: #bfcbd9;
@menuActiveText: #ffffff;
@subMenuActiveText: #f4f4f5;

@menuBg: #304156;
@menuHover: #263445;

@subMenuBg: #1f2d3d;
@subMenuHover: #001528;

@sideBarWidth: 210px;

:export {
    menuText: @menuText;
    menuActiveText: @menuActiveText;
    subMenuActiveText: @subMenuActiveText;
    menuBg: @menuBg;
    menuHover: @menuHover;
    subMenuBg: @subMenuBg;
    subMenuHover: @subMenuHover;
    sideBarWidth: @sideBarWidth;
  }

第三步：使用

<template>
    <div>Home</div>
</template>
  <script setup>
import variables from "@/assets/css/variabels.module.less";
console.log(variables);
</script>
<style >
</style>