@import (css) 是唯一可靠方式，因 Less 默认将所有 @import 当作 Less 源码解析导致报错；必须无空格、仅支持相对/绝对路径、不支持变量插值和协议头；Webpack 中需配置 paths 或用相对路径；Less 不递归解析 CSS 中的 @import。
@import (css) 是唯一能稳定绕过 Less 编译、原样输出 @import url() 的方式。其他写法在构建流程中极易失效，尤其在 Webpack、Angular 或 Vite 环境下。
为什么 @import "xxx.css" 会报错
Less 默认把所有 @import 当作 Less 源码处理——哪怕后缀是 .css，它仍会尝试解析注释里的 /、url() 中未引号的路径、calc() 里的斜杠等，结果常抛出：ParseError: Unexpected input 或 Invalid CSS after ""。这不是路径写错，是解析动作本身导致的。
- 错误示例：
@import "normalize.css";→ 报Missing closing ')' - 错误示例：
@import "./node_modules/antd/dist/reset.css";→ 报Expected 1 selector or at-rule - 本质问题：CSS 文件内容不符合 Less 语法，而 Less 不会自动跳过它
@import (css) 的写法与硬性限制
这是 Less 内置的语法级指令，强制跳过解析，直接生成标准 CSS 的 @import url()。但必须严格满足以下条件：
-
@import和(css)之间**不能有空格**：@import(css) "a.css";无效，@import (css) "a.css";才有效 - 路径只支持相对路径（如
"../css/base.css"）或绝对路径（如"/assets/css/reset.css"），不支持协议头：@import (css) "https://cdn.com/style.css";会失败 - 不支持变量插值：
@path: "base.css"; @import (css) "@{path}";会报错 - 多个
@import (css)会按顺序生成多个@import url()，浏览器同步加载
Webpack / less-loader 下常见路径失效原因
less-loader 对路径的解析和 Webpack 的 resolve.alias 是两套逻辑，@import (css) 不认 ~ 别名，除非你显式配置 paths：
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
@import (css) "@/assets/css/antd.css";（@/是 Vue CLI 别名，Less 不识别） - ✅ 正确做法一（推荐）：用相对路径
@import (css) "../assets/css/antd.css"; - ✅ 正确做法二：在
less-loader配置中加paths，例如：paths: [path.resolve(__dirname, "src")]，再写@import (css) "~assets/css/antd.css";（注意~前缀需配合paths） - ⚠️ 注意：
javascriptEnabled: true在新版 less-loader 中已弃用且有安全风险，勿开启；它还会干扰(css)行为
CSS 文件内部的 @import url() 不会被递归加载
Less 只处理顶层 @import，不会解析被引入 CSS 文件里的原生 @import url()。比如你写了 @import (css) "a.css";，而 a.css 里有 @import url("b.css");，那么 b.css 根本不会加载。
- 应对方式只有两个：手动拆出依赖，在 Less 中逐条声明：
@import (css) "b.css"; @import (css) "a.css"; - 或改用 HTML 的
<link>引入，完全绕过 Less 编译链 - Angular 用户更推荐直接配进
angular.json的styles数组，避免一切预处理器干扰
最容易被忽略的一点是：@import (css) 的括号和关键字之间那个空格，看着不起眼，但少一个就整个失效——而且错误信息往往不提示这个，只会报“Unexpected input”，得靠经验排查。
