less中@import "@/styles/variables.less"不生效的根本原因是less引擎不识别@/别名，仅支持绝对或相对路径；需用path.resolve(__dirname, 'src/styles/variables.less')配置absolute路径，并开启javascriptenabled: true。
Less里用@import "@/styles/variables.less"不生效
这是最典型的失效场景：你写了@import "@/styles/variables.less"，编译没报错，但变量用不了，HMR也不响应修改。根本原因不是Vite配置漏了，而是Less引擎压根不认@/这种别名——它只接受绝对路径或相对路径，而@/是Vite在JS层做的路径映射，到Less解析阶段早已退出作用域。
验证方法很简单：在variables.less第一行加@debug "loaded";，启动开发服务器，如果控制台没输出，说明这个文件根本没被加载。
- 必须用
path.resolve(__dirname, 'src/styles/variables.less')生成绝对路径 - 不能拼字符串（比如
__dirname + '/src/styles/variables.less'），Windows下反斜杠会崩 - 确保
vite.config.ts里已import path from 'path'，且__dirname指向配置文件所在目录（monorepo里尤其要注意）
additionalData注入后变量仍undefined
即使路径写对了，变量还是undefined，大概率是javascriptEnabled: true没开。Less默认禁用JS表达式，而@import动态解析路径属于JS能力范畴，不开这个开关，@import语句会被直接忽略。
配置位置在css.preprocessorOptions.less下，不是顶层less选项：
css: {
preprocessorOptions: {
less: {
javascriptEnabled: true,
additionalData: `@import "${path.resolve(__dirname, 'src/styles/variables.less')}";`
}
}
}
-
javascriptEnabled: true必须显式声明，Vite不会帮你补 - 别和
modifyVars混用——后者只影响顶层变量，对@import进来的文件无效 - 如果项目用了
vite-plugin-style-import等样式插件，确认它没覆盖掉你的preprocessorOptions
构建时variables.less路径解析失败
开发时一切正常，vite build却报Cannot find module或变量未定义。这是因为构建阶段Node.js的模块解析逻辑更严格，path.resolve()若依赖process.cwd()或相对路径拼接，容易因工作目录变化而失效。
- 永远以
__dirname为基准，不要用process.cwd() - 路径必须存在且可读：运行
node -e "console.log(require('fs').existsSync('<your-resolved-path>'))"</your-resolved-path>验证 - 如果
variables.less里还@import了其他文件，那些路径也得是绝对路径，不能嵌套别名
SCSS和Less共存时全局变量管理混乱
项目里既有.scss又有.less，都想用同一套变量。别试图让两者共享additionalData——SCSS用additionalData注入variables.scss，Less必须走modifyVars或单独@import，因为Less不支持字符串注入@import语句。
- SCSS方案：
css.preprocessorOptions.scss.additionalData+ 绝对路径 - Less方案：二选一——要么用
modifyVars传纯值（适合颜色、字号等简单变量），要么用additionalData+@import绝对路径（适合mixin、函数等复杂逻辑） - 避免把变量文件放
public/——那里的文件不会被Vite处理，路径硬编码且无法哈希
@import或url()这类CSS原生语法，你就得亲手把路径掰直。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
