vite + vue3.0项目，在ts文件中获取less变量

Question

我已在less文件中声明

@colors: #0094ff;
:export {
theme: @colors;
}

然后在my.js中引入
import variables from './variables.less'
console.log(variables)

为什么variables输入的是这个样子

怎么能够variables.theme

Answer 1

第一步：
vite.config.ts
css: {

preprocessorOptions: {
  less: {
    javascriptEnabled: true
  }
}

}

第二步：
在src/styles 文件夹 创建 antdesign-variables.less theme.module.less

antdesign-variables.less 文件内容如下：
@import 'ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
@import '@/styles/theme.module.less'; // 一定要 xxx.module.less

theme.module.less 文件内容如下：
@primary-color: #306555; // 全局主色

:export {
primary: @primary-color
}

第三步：
在main.js 导入

// 修改主题颜色
import '@/styles/antdesign-variables.less'

然后就OK了
测试结果 在vue文件导入
import theme from '@/styles/theme.module.less'
console.log(theme)

Answer 2

import { theme } from './variables.less'