不能直接@import ".css"文件而不被编译，必须用@import (css) "file.css"强制原样输出为@import url()，否则Less会将其当Less源码解析导致报错。
Less 能不能直接 @import 一个 .css 文件？
可以，但默认行为不是你想要的“把 CSS 当 Less 编译”，而是原样 @import 进去——也就是生成一条 @import url("xxx.css") 的 CSS 规则。如果你写的是 @import "reset.css";，Less 编译后不会解析它的内容，只当它是外部资源。
真正想“把外部 CSS 当 Less 源码读进来、参与变量/嵌套/混合等编译”，得加 .less 后缀或显式声明类型：
-
@import "reset.css";→ 输出@import url("reset.css"); -
@import (less) "reset.css";→ 把 reset.css 当 Less 源文件读取（要求内容实际是合法 Less/CSS） -
@import "reset.less";→ 自动按 Less 解析（推荐方式，语义明确）
为什么 @import (less) 有时会报错？
常见报错如 ParseError: Unexpected input 或 variable @color is undefined，本质是外部 CSS 文件里混了浏览器能吃但 Less 解析器不认的语法，比如：
- CSS 自定义属性（
--main-color）没被转义或包裹在@plugin里 - 媒体查询里用了
and (hover: hover)这类带括号的布尔表达式，Less 旧版本会误判为函数调用 - 源文件开头有 UTF-8 BOM 字节（尤其 Windows 编辑器保存时默认加），Less 解析器卡在第一个字符
解决办法：用编辑器检查并移除 BOM；把可疑 CSS 片段包进 {} 或改用 @import (inline) 避开解析（但失去变量穿透能力）。
立即学习“前端免费学习笔记（深入）”；
如何让外部 CSS 中的变量在当前 Less 文件里可用？
Less 的变量作用域是“从上到下、就近合并”，只要 @import 语句出现在使用变量之前，且导入的是 (less) 类型，变量就自动生效。但要注意顺序和命名冲突：
- 导入必须写在变量首次引用之前（哪怕中间隔了注释也不行）
- 如果两个
@import (less)文件都定义了@primary-color，后导入的会覆盖前一个 - 避免在外部 CSS 里用
!default修饰变量——它只对同一文件内后续定义有效，跨文件不传递
示例：
@import (less) "variables.css"; // 内容：@brand-blue: #007bff;<br>@import (less) "mixins.css"; // 内容：.btn { color: @brand-blue; }<br>.call-to-action { .btn(); }
Webpack / Vite 环境下 @import 外部 CSS 有什么坑？
构建工具链会干预 @import 行为，尤其是当路径是相对路径或别名路径时：
- Webpack 的
less-loader默认不处理@import "node_modules/some-lib/style.css"，需配置paths或改用@import "~some-lib/style.css"; - Vite 的
vite-plugin-less对(less)导入支持较稳，但若外部 CSS 里含@import url(...)，可能触发二次网络请求（应避免） - 所有构建工具都会忽略
@import (css)的解析，只做透传——所以别指望靠它实现主题切换时动态加载 CSS 变量
最稳妥的做法：把需要复用的样式抽成 .less 文件，统一用 @import "xxx.less";，外部纯 CSS 就老老实实走 <link> 或 CSS-in-JS 加载。
别忘了检查 Less 版本——4.0+ 对 (less) 的容错比 3.x 强很多，但某些 CSS-in-CSS 的写法（比如嵌套的 @keyframes）依然不支持。
