Less默认将@import "xxx.css"视为外部资源，原样输出为@import url()，不解析、不编译；必须用@import (css) "path.css"显式声明才能安全透传，且不支持协议头和变量插值。
因为 @import "xxx.css" 默认触发 Less 的“CSS 导入模式”，它不编译内容，只原样转成 @import url("xxx.css") 输出到最终 CSS 中——这不是 bug，是设计行为。
Less 默认把 .css 当作外部资源处理
Less 编译器看到 .css 后缀，就放弃解析，直接包装成标准 CSS 的 @import url()。它不会展开、不会变量插值、不会检查语法，也不管你写的是 html { margin: 0; } 还是 @keyframes。这种“透传”行为导致：你写的路径原封不动进最终 CSS，而浏览器加载时按 CSS 文件位置解析该路径，极易 404。
@import (css) 是唯一可控的语法开关
必须显式写成 @import (css) "path.css"，括号和 @import 之间不能有空格；否则会被当成普通 Less 导入，进而报错。
-
@import (css) "./reset.css";✅ 正确，输出@import url("./reset.css"); -
@import (css) "https://cdn.example.com/a.css";❌ 失败，Less 不支持协议头 -
@import (css) "@{base}/theme.css";❌ 失败，变量插值在 (css) 模式下不生效 -
@import (css) "~normalize.css/normalize.css";✅ Webpack/Vite 下推荐，依赖别名解析
为什么你看到的“原样输出”其实很危险
表面上样式加载了，但背后有三个隐性风险：
- 路径基准错位：Less 按
.less文件位置解析路径，浏览器按编译后.css位置解析，两者不一致就 404 - 嵌套
@import url()被跳过：被引入的 CSS 文件里如果有自己的@import url("font.css")，Less 完全不处理，全交给浏览器——现代环境常因 CSP 或跨域静默失败 - 加载顺序失控：多个
@import (css)按书写顺序输出，但 Webpack 分 chunk 后，link标签插入顺序可能被打乱，导致 normalize 被 antd 覆盖
真正要警惕的不是语法是否通过，而是最终 CSS 里那行 @import url(...) 是否真能被浏览器成功请求并执行——这一步完全脱离 Less 控制，得靠 DevTools 的 Network 面板验证，而不是看编译有没有报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
