less 中 @import “wasn’t found” 是因不识别 vite 别名，需加 ~ 前缀或绝对路径；url() 报错需加 ~ 或用 public/；less.preprocessoroptions 失效多因未设 javascriptenabled: true；循环 import 会导致卡死，应避免并借助 postcss-import 定位。
Less @import 报 “wasn’t found” 是因为不认 Vite 别名
Less 编译器本身不解析 @/styles/vars.less 这类别名，它只按文件系统路径查找。Vite 的 resolve.alias 对 JS 有效，但对 Less 的 @import 无效——除非你显式加 ~ 前缀告诉构建工具“这是模块路径”。
常见错误写法：@import "@/styles/vars.less"; → 静默失败，变量 undefined，HMR 不触发。
正确做法：
- 加
~前缀：@import "~@/styles/vars.less"; - 或用
path.resolve()写绝对路径（尤其适合additionalData注入）：@import "${path.resolve(__dirname, 'src/styles/vars.less')}"; - 避免在
additionalData中混用别名，Vite 插件此时已退出作用域，@/会被当字面量处理
background-image: url('./xxx.png') 编译报 “Can’t resolve”
Less 默认把 url() 当作纯字符串，css-loader 或 Vite 的 CSS 插件不会自动接管相对路径解析——除非你明确告诉它这是模块资源。
三种可行方案：
- 加
~前缀：background: url('~@/assets/logo.png');，交由 Vite 解析并哈希 - 改用
public/目录 + 绝对路径：background: url('/logo.png');，跳过构建链路，但失去哈希和自动复制 - 避免用变量拼接：
url("@{img-base}/logo.png")不展开，必须写成url(~"@{img-base}/logo.png")，且@img-base值末尾要带/
Vite 配置 less.preprocessorOptions 没生效？检查 javascriptEnabled
modifyVars 和 additionalData 都依赖 Less 引擎的 JS 支持能力。若没开 javascriptEnabled: true，@import、变量插值、甚至 @debug 都会静默失效。
典型症状：修改 variables.less 后无 HMR，控制台看不到 @debug 输出，modifyVars 定义的变量在样式里不生效。
配置要点：
- 必须设
javascriptEnabled: true，否则所有 JS 相关语法（包括@import路径解析）被禁用 -
additionalData中的@import必须是绝对路径，__dirname是基准，别用process.cwd() - 不要同时配
modifyVars和additionalData来覆盖同一变量——前者优先级低，会被后者覆盖
Less 循环 import 导致卡死或内存溢出
Less 的 @import 是文本拼接，不是模块加载。A.less → B.less → A.less 这种循环不会报错，而是让编译器无限展开、爆内存或静默卡住。
定位比修复更关键：
- 删掉所有
@import (reference)，让导入全部输出内容——循环会立刻暴露为Variable @xxx is undefined - 用
postcss-import替代原生@import，错误信息会直接打出完整链路：A.less → B.less → C.less → A.less - 新建原子级
tokens.less作为唯一根文件，禁止它再@import任何其他文件
真正容易被忽略的是：循环常藏在第三方 UI 库的 Less 文件之间，你没动一行代码，升级版本就引入了新依赖环。这类问题只能靠构建时依赖图暴露，没法靠肉眼排查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
