Less报Can't resolve错误本质是less-loader未启用Webpack模块解析，需用~前缀（如@import (inline) "~codemirror/xxx.css"）或配置lessOptions.paths，而非修改路径或开启javascriptEnabled。
Less 报 Can't resolve 错误，根本不是路径写错了
报错信息里出现 Can't resolve './codemirror/addon/lint/lint.css' in 'src/'，不代表文件真丢了——而是 Less 解析器在 Webpack 的模块解析链路里“没轮到它干活”。less-loader 默认只处理 @import 语句，但不自动走 Webpack 的 resolve.alias 或 node_modules 查找逻辑，除非你显式告诉它。
常见误操作：
- 直接写
@import "codemirror/theme/material-palenight.css"→ Webpack 在src/下找，当然 404 - 加引号或改后缀（
"codemirror/xxx.css"→"codemirror/xxx.less"）→ 不解决路径解析，反而触发语法错误 - 开启
javascriptEnabled→ 和路径解析完全无关，纯属白忙活
正确做法只有一条：让 @import 走 Webpack 模块解析。
- 用
~前缀：@import (inline) "~codemirror/theme/material-palenight.css" - 确保
less-loader配置中lessOptions.paths或 Webpackresolve.modules包含node_modules - 如果用
@import (css)，必须写全：@import (css) "~codemirror/xxx.css"，括号和~缺一不可
为什么 url() 里的图片总 404，而 @import 却正常
url() 是 CSS 原生语法，Less 不做任何路径重写，原样输出到最终 CSS 文件；浏览器加载 CSS 后，按该 CSS 文件的 URL 位置去解析相对路径。所以 url(../images/logo.png) 在 /css/app.css 里会请求 /images/logo.png，但实际资源可能在 /assets/images/logo.png。
而 @import 是 Less 语法，由 less-loader 控制解析时机和上下文。
- 别指望
lessc --relative-urls修url()—— 它只影响@import，对url()无效 -
~在url()里能生效，但必须紧贴引号：url(~"@assets/logo.png")，写成url(~ @assets/...)或url('~@assets/...')都失败 - Webpack 项目建议配
resolve.alias：@assets: path.resolve(__dirname, 'src/assets')，再统一用url(~"@assets/...")
Chrome DevTools 显示 .less 文件但跳转行号错乱
这不是 SourceMap 失效，是 @import 导致的行号偏移。Less 的 @import 是文本拼接，不是作用域隔离：入口 index.less 第 10 行 import 了 mixins.less，那 mixins.less 的第 1 行，在编译后就变成整体 CSS 的第 10 + N 行——SourceMap 记录的是拼接后位置，但调试时浏览器按原始文件行号映射，必然错位。
- 检查
styles.css末尾是否含/*# sourceMappingURL=styles.css.map */，少空格或写成//注释都会失效 - Vue CLI / Vite 用户务必设
css.loaderOptions.less.javascriptEnabled = true，否则@import解析中断，SourceMap 断链 - 避免多层嵌套
@import：把base.less → utils.less → helpers.less扁平化为base.less直接 import 所有依赖，减少偏移累积
中文路径报 Unrecognised input 不是编码问题
Less 解析器在词法分析阶段就把中文字符当非法 token 拦截了，连文件读取都未触发。报错定位到 /src/样式/reset.less 第 3 行，真实原因是解析器卡在 样式 这两个汉字上，根本没往后读。
-
javascriptEnabled、charset、UTF-8 BOM全部无效——路径解析发生在 JS 执行前 - 唯一解法：用构建工具绕过 Less 自身路径解析。Webpack
less-loader配paths: [path.resolve(__dirname, 'src')]，然后所有@import改用英文路径：@import "components/button.less" - 命令行用户必须用
lessc --include-path=src src/样式/reset.less out.css，且reset.less内部不能出现任何中文路径
真正卡住的永远是路径解析链路的第一环：Less tokenizer 看到非 ASCII 字符就停，Webpack resolver 根本没机会介入。调试时先确认报错是否出现在 @import 或 url() 语句本身，再决定该动 Less 配置、Webpack alias，还是直接重构路径命名。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
