@import (css)是唯一能绕过Less解析、原样输出@import url()的方式，必须无空格、仅支持相对/绝对路径，不支持变量插值或协议头；Webpack/Vue CLI中需配置paths或用相对路径，Angular项目推荐直接配入angular.json的styles数组。
因为 Less 默认把所有 @import 当作 Less 源码解析，而外部 CSS 文件（如 normalize.css、antd.css）根本不符合 Less 语法——它不会跳过，也不会警告，而是硬啃，结果不是报错，就是输出错乱或缺失的 CSS。
为什么 @import "xxx.css" 会触发解析错误
Less 编译器看到 @import "reset.css" 就立刻去读取并尝试编译该文件内容。但 reset.css 里第一行可能是 @charset "UTF-8"; 或 html { margin: 0; }，这些在 Less 解析器眼里全是非法 token：
-
@charset被当成未定义的 at-rule，报ParseError: Unexpected character '@' -
margin: 0;缺少分号？不，是它根本没进入声明上下文，直接卡在词法分析阶段 -
url(./img.png)里的斜杠被当除法、calc()被当运算表达式——哪怕 CSS 文件本身完全合法
@import (css) 的写法和常见失效原因
这是唯一能绕过解析、原样输出 @import url(...) 的方式，但必须严格满足条件：
-
@import和(css)之间**不能有空格**：@import (css) "a.css"✅，@import(css) "a.css"❌ - 路径只支持相对路径（
"../css/antd.css"）或绝对路径（"/assets/css/reset.css"），不支持协议头或变量插值 - Webpack/Vue CLI 中的
@/或~/别名，Less 不识别；必须显式配置lessOptions.paths，或改用相对路径 - Angular 项目中，
@import (css) url("~@cloudscope/core/index.css")可能仍失败——因为~是 Webpack 别名，而 Angular CLI 的构建链路可能未将less-loader配置透传到全局样式入口
为什么加了 (css) 还是没生效
成功输出 @import url(...) 不等于样式就进了页面。真正卡住的往往是后续环节：
立即学习“前端免费学习笔记（深入）”；
- 浏览器按
<link>加载顺序应用 CSS，而 Webpack 分 chunk 后，@import (css)生成的语句可能排在你自定义样式之后，被覆盖 - CSS 文件内部的
@import url()不会被 Less 递归加载——比如antd.css里自带的字体或图标引用，会 404 - 多个
@import (css)并发加载，无加载顺序保证；若依赖关系强（如 reset → base → component），应拆成独立<link>或走构建工具 styles 数组 - DevTools 里查不到样式？先确认 Network 面板是否请求成功，再看 Computed 样式里有没有被
!important或更高 specificity 覆盖
最稳的做法不是在 Less 里兜底，而是把纯 CSS 文件交给构建工具统一管理：angular.json 的 styles 数组、Vite 的 css.preprocessorOptions.less.additionalData、或 Webpack 的 entry 直接 require —— 这些路径由模块系统解析，不经过 Less 编译器，也就彻底避开所有解析陷阱。
