在 vite 项目中配置 less，需要安装 @vitejs/plugin-vue（若使用 vue）或 @vitejs/plugin-react（若使用 react）以及 less 和 less-loader。在 vite.config.js 中引入插件并注册到 plugins 数组，vite 会自动处理 css 预处理，无需额外配置 loader 选项即可在 中使用变量和混合。
如何安装依赖并初始化基础配置
直接通过 npm 或 yarn 安装 less 和 less-loader，并在 vite.config.js 中添加对应的构建插件。安装命令为 npm install -D less less-loader。配置的核心是将插件实例放入 plugins 数组，这样 Vite 就能识别并编译 Less 文件。
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 如果使用 Vue
// import react from '@vitejs/plugin-react'; // 如果使用 React
export default defineConfig({
plugins: [
vue(), // 或 react()
],
});
安装完成后，在项目的 .vue 或 .jsx 文件中，你可以直接使用 标签编写样式。Vite 会利用内置的 esbuild 进行快速转换，并通过 less-loader 将 Less 语法转换为 CSS。确保你的组件模板中引用了包含 Less 样式的部分，例如：
<template><div class="app">Hello</div>
</template><script setup>
// 逻辑代码
</script><style lang="less">
.app {
color: red;
}
</style>
运行 npm run dev 启动开发服务器，浏览器应能正确渲染应用，且控制台无关于 Less 解析的错误。这证明了基础环境已就绪。
如何配置全局 Less 变量注入
为了实现全局变量可用，需要在 vite.config.js 中配置 css.preprocessorOptions。通过设置 additionalData 属性，可以将一个包含变量定义的 Less 文件自动注入到每个被处理的 Less 文件中。这样就不需要在每个组件中手动 @import 变量文件。
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
plugins: [vue()],
css: {
preprocessorOptions: {
less: {
additionalData: `@import "${path.resolve(__dirname, 'src/styles/variables.less')}";`,
},
},
},
});
首先创建一个文件 src/styles/variables.less，定义你需要的全局变量，例如：
$primary-color: #1890ff; $font-size-base: 14px;
然后在任意组件的 中直接使用这些变量：
<style lang="less">
.button {
background-color: $primary-color;
font-size: $font-size-base;
}
</style>
这种配置方式利用了 Less 的特性，在编译前将变量内容拼接到每个文件的头部。注意路径必须使用绝对路径，因此引入了 Node.js 的 path 模块来解析 __dirname。重启开发服务器后，检查浏览器开发者工具，确认样式已生效且未报错。
当 Less 变量未生效时如何排查
如果在全局变量注入配置完成后，组件中的 Less 变量仍然显示为未定义或样式未应用，通常是因为路径解析错误或缓存问题。最常见的原因是 path.resolve 生成的路径不正确，或者 additionalData 字符串拼接出错。此外，Vite 的热更新有时可能不会立即反映配置更改，需要完全重启服务器。
验证方法：在 vite.config.js 中打印出 additionalData 的值，确认其指向的文件确实存在且包含正确的变量定义。例如：
const varPath = path.resolve(__dirname, 'src/styles/variables.less');
console.log('Variable file path:', varPath);
export default defineConfig({
// ... other config
css: {
preprocessorOptions: {
less: {
additionalData: `@import "${varPath}";`,
},
},
},
});
如果路径正确但依然无效，尝试删除项目根目录下的 node_modules/.vite 缓存文件夹，然后重新运行 npm run dev。同时，检查 package.json 中 less 和 less-loader 的版本兼容性，建议使用较新的稳定版本以避免已知 bug。如果使用了 TypeScript，确保 vite.config.ts 中的类型定义正确，且 path 模块已正确导入。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
