vue3 vite less 变量

在使用Vue3 + Vite构建项目时，使用Less变量的方法如下：
1. 在全局的index.less文件中定义所需的颜色和属性变量。例如，在color.less文件中定义了@primary-color变量为#1890ff。
2. 在vite.config.js配置文件中，添加css选项，将Less的预处理器选项进行配置。在modifyVars中引入color.less文件，并设置hack为true。确保javascriptEnabled为true。例如：

// vite.config.js
...
css: {
  preprocessorOptions: {
    less: {
      modifyVars: {
        hack: `true; @import (reference) "${path.resolve('src/styles/color.less')}";`,
      },
      javascriptEnabled: true
    }
  }
},
...

3. 重新启动项目，此时在其他文件中使用@primary-color变量时应该不再报错，而是正常使用定义的颜色值。
这样可以在Vue3 + Vite项目中使用Less变量，并实现全局的颜色定义。引用 <span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* [vite+vue3全局定义less变量在单文件中使用](https://blog.csdn.net/V_AYA_V/article/details/117783527)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [浅谈vue引入css,less遇到的坑和解决方法](https://download.csdn.net/download/weixin_38554193/12764692)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]