Vite + Vue单文件组件中使用less全局变量

1、新建global.less

└─src
   ├─assets
      ├─css
         ├─global.less

// global.less
@size-title: 24px;
@color-title: #333333;

2、修改vite.config.js

import path from 'path';
import { defineConfig } from 'vite'

export default defineConfig({
  ...
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        additionalData: `@import "${path.resolve(__dirname, 'src/assets/css/global.less')}";`
      }
    }
  }
})

注意： @import "${path.resolve(__dirname, 'src/assets/css/global.less')}";结尾处的;不能省略，否则会报错：# missing semi-colon or unrecognised media features on import

3、在Vue文件中使用

<style scoped lang="less">
.title {
    font-size: @size-title;
    color: @color-title;
}
</style>