1、安装依赖

pnpm install -D less less-loader

2、定义全局css变量文件 src/assets/css/global.less

:root {--public_background_font_Color: red;--publicHouver_background_Color: #fff;--header_background_Color: #fff;--menu_background: #fff;
}

3、引入less src/main.js

import {createApp} from 'vue'import './assets/css/global.less';
import './assets/css/style.css'import 'ant-design-vue/dist/reset.css';import Antd from 'ant-design-vue';
import App from './App.vue';const app = createApp(App)
app.use(Antd)
app.mount('#app')

4、配置vite vite.config.js

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],// less configcss: {preprocessorOptions: {less: {javascriptEnabled: true,},},},
})

5、使用 src/App.vue

<script setup>
import {computed, onMounted, ref} from "vue";
import axios from "axios";// table data
const isTableDataLoading = ref(false)
const columns = [{name: '姓名',dataIndex: 'name',key: 'name',},{name: '性别',dataIndex: 'gender',key: 'gender',},{title: '年龄',dataIndex: 'age',key: 'age',},{title: '电话',dataIndex: 'phone',key: 'phone',},{title: '邮箱',key: 'email',dataIndex: 'email',ellipsis: true,},{title: '薪资',key: 'salary',dataIndex: 'salary',},{title: '操作',key: 'action',},
];const data = ref([]);// pagination
const current = ref(1)
const pageSize = ref(8)
const total = ref(0)
const pagination = computed(() => ({total: total.value,current: current.value,pageSize: pageSize.value,
}));// load data
const loadTableData = () => {isTableDataLoading.value = trueconst params = {page: current.value,size: pageSize.value,}axios({method: "get",url: "http://127.0.0.1:8889/zdppy_amuserdetail",params: params}).then((response) => {console.log("response.data", response.data);const responseData = response.data.dataconsole.log("responseData=", responseData)data.value = responseData.results;total.value = responseData.count;}).finally(() => {isTableDataLoading.value = false})
}// handle pagination change
const handleTableChange = (pag, filters, sorter) => {console.log(pag, filters, sorter)current.value = pag.currentpageSize.value = pag.pageSizeloadTableData()
};onMounted(() => {loadTableData()
})
</script><template><div id="test-less">xxx</div><a-table:columns="columns":data-source="data":row-key="record => record.id":pagination="pagination":loading="isTableDataLoading"@change="handleTableChange"bordered><template #headerCell="{ column }"><template v-if="column.key === 'name'"><span>{{ column.name }}</span></template><template v-else-if="column.key === 'gender'"><span>{{ column.name }}</span></template></template><template #bodyCell="{ column, record }"><template v-if="column.key === 'action'"><a-space wrap><a-button size="small" type="primary" block>编辑</a-button><a-button size="small" block>详情</a-button><a-button size="small" danger block>删除</a-button></a-space></template></template></a-table>
</template><style scoped lang="less">
#test-less {width: 100px;height: 100px;background: var(--public_background_font_Color); //自己定义的变量
}
</style>