@import (css)是唯一能原样输出@import url()的方式，必须无空格、仅支持相对/绝对路径、不支持变量插值和协议头。
Less 默认把 @import 当作 Less 源码处理，不是“加载”，而是“编译拼接”
Less 的 @import 本质是编译期文本合并：它读取文件内容，尝试用 Less 解析器逐行解析。遇到 .css 文件时，它不会跳过或转发，而是硬着头皮去 parse —— 结果就是 html { margin: 0; } 这类合法 CSS 被当成语法错误，报 ParseError: Unrecognised input 或静默丢弃整条 @import。这不是路径没找到，是解析动作本身失败。
@import "xxx.css" 为什么编译后连 @import url() 都不输出？
因为 Less 在解析失败后默认“跳过该导入”，不报错也不留痕迹，导致最终 CSS 里既没有内联样式，也没有 @import url() 声明。常见诱因包括：
-
normalize.css里的注释/* */中斜杠被误判为除法运算符 -
url(assets/icon.png)没加引号，Less 尝试解析为变量或函数调用 -
calc(100% - 2px)中的/被当除法，但上下文不支持 - 文件实际存在，但被
@import (reference)或嵌套@import隔离，根本没进入输出流程
@import (css) 是唯一能原样输出 @import url() 的写法
它强制 Less 放弃解析，只做字符串拼接，生成标准 CSS 的 @import url("...")。但必须满足三个硬性条件：
-
@import和(css)之间**不能有空格**：@import (css) "a.css"✅，@import(css) "a.css"❌ - 路径只能是相对路径（如
"../reset.css"）或绝对路径（如"/css/antd.css"），不支持~别名或协议头 - Webpack / Vue CLI 环境下，
@import (css) "@/styles/base.css"会失败——@/是 Webpack alias，Less 不识别，得配less-loader的paths或改用相对路径
就算 @import (css) 成功，样式也可能不生效
浏览器收到 @import url(...) 后是同步加载并阻塞渲染的，但现代构建工具（如 Webpack）常把入口 CSS 打包进 JS chunk，而 @import 加载的 CSS 不参与 chunk 分割和顺序控制。结果就是：
- 第三方 CSS（如 Ant Design）可能被其他样式覆盖，因为 specificity 或加载顺序不可控
- DevTools 的
Computed面板里看不到规则，不是 Less 没编译，而是网络请求失败、MIME 类型不对（服务器返回text/plain）、或跨域限制拦截了@import - Angular 项目中更推荐直接在
angular.json的styles数组里声明 CSS 文件，绕过 Less 编译链路
真正难处理的不是报错，是“没报错也没效果”——这时候要查 Network 面板看 CSS 是否加载成功，再看 Elements 面板里 <style></style> 标签内容是否含预期的 @import url()，最后才回过头看 Less 文件写法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
