@import (inline) 与原生 css @import 的核心区别在于处理时机和结果：less 的 (inline) 指令会在编译阶段将文件内容原样插入到当前文件中，不进行任何 less 语法解析或变量替换；而原生 css 的 @import 是运行时指令，浏览器在加载样式表时才会去请求并应用该文件。这意味着 (inline) 适合引入不需要被 less 处理的第三方库或静态资源，避免编译错误。
如何正确引入无需解析的静态 CSS 文件
当需要引入一个包含标准 CSS 语法的文件（如 Bootstrap 或自定义组件）且不希望 Less 编译器尝试解析其中的语法时，应使用 @import (inline) "path/to/file.css";。这样做会将文件内容直接“复制”到输出中，确保文件内的 CSS 规则保持原样。如果省略 (inline)，Less 会尝试解析该文件，若其中包含 Less 不支持的语法或变量引用，会导致编译失败。
// main.less
@import (inline) "./vendor/external.css";
.container {
color: red;
}
预期输出：
.container {
color: red;
}
/* external.css 的内容会被直接插入到这里 */
对比带和不带 inline 时的编译行为差异
如果不使用 (inline)，Less 编译器会将导入的文件视为 Less 源码的一部分进行预处理。这允许你在导入的文件中使用 Less 变量、混合（Mixins）和嵌套规则。然而，这也意味着导入的文件必须符合 Less 语法规范。相比之下，(inline) 完全跳过这一过程，仅做文本替换。这种差异在处理非 Less 兼容的资源时尤为关键，例如某些旧版 CSS 框架可能使用了 Less 无法识别的特定语法结构。
// main.less
@import "./styles/mixins.less"; // Less 会解析此文件
.mixin-example {
.mixin-name();
}
// 如果 ./styles/mixins.less 包含:
// .mixin-name() { color: blue; }
// 则编译成功。
// 如果改为 @import (inline) "./styles/mixins.less";
// 则 .mixin-name() 不会被定义，导致编译错误或未定义引用。
预期输出：
.mixin-example {
color: blue;
}
当导入的文件包含 Less 变量时会发生什么
如果使用 @import (inline) 引入一个包含 Less 变量定义的文件，这些变量不会在当前文件的上下文中生效，因为 (inline) 阻止了 Less 的解析引擎进入该文件。这意味着你无法在后续代码中引用该文件内定义的变量。相反，如果使用普通的 @import，变量会被注册到全局或局部作用域中，供后续代码使用。因此，若需复用变量，必须使用普通导入；若仅需注入样式而不涉及逻辑交互，则使用 (inline)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
