Less的@import默认不合并CSS文件，而是原样输出@import url(...)语句；仅当显式使用(inline)参数时，才读取并内联CSS内容，但不校验语法且无去重机制。
Less 的 @import 默认不合并 CSS 文件，而是编译为 @import 规则
Less 的 @import 本质是“引入并参与编译”，但当被导入文件后缀不是 .less（比如 .css），Less 默认会原样输出 @import url(...)，不解析、不内联、不合并。这不是 bug，是设计行为——它把 .css 当作外部资源交由浏览器加载。
常见错误现象：@import "reset.css"; 编译后仍保留 @import "reset.css";，导致多一次 HTTP 请求，且无法被 Less 变量/嵌套等特性影响。
- 只有
.less、.css（加(inline)时）、.js等少数后缀有特殊处理逻辑 -
.css导入默认走“reference”语义，即仅提供声明检查（如变量引用），但不输出样式 - 想强制内联 CSS 内容，必须显式加
(inline)参数
用 (inline) 才能真正合并 CSS 内容
加 (inline) 后，Less 会读取文件内容、跳过语法解析、直接插入到当前位置（类似预处理器的 #include）。这是唯一能将外部 CSS 文本“缝进”最终 CSS 的方式。
示例：
@import (inline) "normalize.css";
注意点：
- 路径必须可访问（相对路径基于入口 Less 文件，不是当前文件）
- 不会做 CSS 语法校验，如果
normalize.css里有 Less 语法（如@color: red;），会直接报错 - 重复
@import (inline)同一文件，内容会被多次插入——无去重机制 - Webpack / Vite 等构建工具中，若使用 less-loader，需确保
paths配置正确，否则(inline)会找不到文件
为什么 (reference) 或 (less) 也不合并？
@import (reference) "xxx.css" 表示“仅用于类型检查”，完全不输出；@import (less) "xxx.css" 强制按 Less 解析（哪怕后缀是 .css），但一旦文件含非法 Less 语法（如媒体查询未闭合、CSS custom property 写法），就会编译失败。
典型翻车场景：
- 导入现代 CSS（含
@layer、container查询）→ Less 5.x 不识别 → 报错 - 导入带 BOM 的 UTF-8 CSS 文件 → Less 读取时可能卡在第一个字节 → 静默截断或乱码
- 路径写成绝对路径（如
/assets/reset.css）但未配paths→(inline)失败，无提示
替代方案：用构建工具预处理比硬塞进 Less 更可靠
Less 不是 CSS 合并器。真正需要“合并第三方 CSS 并压缩”的场景，更适合交给 PostCSS、esbuild 或 Webpack 的 ConcatPlugin 处理。
例如，在 Webpack 中：
- 用
style-loader+css-loader单独处理normalize.css - 用
MiniCssExtractPlugin统一提取所有 CSS 到一个文件 - 避免在 Less 里
@import (inline)第三方 CSS —— 它绕过了 source map、tree-shaking 和缓存控制
真正容易被忽略的是：Less 的 @import 是编译期行为，而 CSS 合并是构建期关注点；混用两者会让调试链路变长、错误定位变模糊。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
