Less的@import (css)路径404主因是基准错位（.less位置 vs CSS输出位置）与大小写敏感叠加，且不自动解析Webpack别名；需用~前缀+less-loader paths配置，并配合case-sensitive-paths-webpack-plugin在构建时卡住大小写错误。
Less @import (css) 路径大小写不匹配直接404
Linux下Less编译后生成的CSS里，@import url(...) 的路径是相对于最终CSS文件位置解析的，而Less本身只按.less源文件位置解析@import (css)——两者基准不一致，加上大小写敏感，很容易变成dist/css/../assets/css/reset.css → dist/assets/css/reset.css，但真实路径可能是dist/static/css/reset.css。根本不是“路径写错了”，而是“路径基准错位+大小写错位”双重问题。
关键点：@import (css) 不经过Webpack路径别名解析，除非你显式加~前缀；而~能否生效，取决于less-loader是否配置了paths。
- 错误写法：
@import (css) "@/styles/reset.css"→css-loader当普通字符串处理，找不到@目录 - 正确写法：
@import (css) "~@/styles/reset.css"→ Webpack按alias映射后传给less-loader - 若
less-loader已配paths: [path.resolve(__dirname, "src")]，可写@import (css) "~styles/reset.css"
Webpack构建时拦截大小写错误
等报错再修太晚，应该在打包阶段就卡住。用case-sensitive-paths-webpack-plugin插件，它会在模块解析时强制校验路径大小写是否与磁盘实际文件名完全一致（含大小写），一旦不匹配立刻抛Module not found错误，而不是静默 fallback 或加载错文件。
这个插件不依赖文件系统类型——Windows下也能提前暴露问题，避免上线才发现。
- 安装：
npm install --save-dev case-sensitive-paths-webpack-plugin - 配置：
plugins: [new require('case-sensitive-paths-webpack-plugin')()] - 注意：必须放在
resolve.plugins之后、module.rules之前，否则可能被其他loader绕过
Less源文件里中文或BOM导致路径解析失败
Less词法分析器遇到非ASCII字符（比如中文路径@import "../组件/button.less"）或不可见字符（U+200B零宽空格、UTF-8 BOM）会直接报ParseError: Unrecognised input，根本不会走到路径匹配逻辑。它不尝试解码，看到汉字就停。
这不是编码显示问题，是解析器层面拒绝处理。
- VS Code右下角显示“UTF-8”≠安全，要确认是“UTF-8 无 BOM”：点击编码 → “Save with Encoding” → 选
UTF-8（不是UTF-8 with BOM） - 已有BOM？Linux/macOS执行：
sed -i '1s/^\xEF\xBB\xBF//' src/styles/*.less - 路径含中文？必须通过构建工具绕过Less原生解析：Webpack配
less-loader的paths，Vite配preprocessorOptions.less.paths，然后所有@import改用纯ASCII路径（如@import "~styles/reset.less"）
修复后仍404？检查浏览器加载时的真实路径
Less编译成功 ≠ CSS能加载。Linux部署后，即使@import url()路径大小写全对，也可能因Nginx/Apache配置、MIME类型错误或CDN缓存导致404或样式不生效。
打开DevTools → Network → 刷新 → 筛选css → 找到对应@import请求，重点看三处：
- Status是否为
404或403（路径或权限问题） - Response Headers中
Content-Type是否为text/css（不是text/plain） - Preview是否为空或显示HTML错误页（说明服务器返回了兜底页面而非CSS）
最直接验证方式：把Network里该请求的完整href复制进浏览器地址栏，看能否直接返回CSS源码。不能的话，问题一定出在服务端路径映射或静态资源发布环节，和Less无关。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
