使用 @import (reference) 可以引入 less 文件中的变量和混合宏，但不会将它们的 css 输出到最终文件中。这能有效避免编译出多余的 css 代码。
普通 @import 与 reference 的区别是什么？
普通 @import 会导入文件中的所有样式并生成对应的 CSS，而 @import (reference) 仅导入定义供后续引用，不产生任何 CSS 输出。
// main.less
@import "variables.less";
@import (reference) "mixins.less";
.box {
.mixin-class; // 引用了 mixins.less 中的混合宏
}
在上面的例子中，variables.less 中的变量会被正常导入并使用，而 mixins.less 中的混合宏虽然被引入，但只有当它被实际调用时才会生成 CSS。如果 mixins.less 中有独立的类定义，这些定义不会被输出。
如何确保只引用需要的部分？
通过明确指定引用的混合宏或变量，可以避免不必要的 CSS 生成。确保只调用真正需要的部分，而不是导入整个文件。
// mixins.less
.mixin-a {
color: red;
}
.mixin-b {
background: blue;
}
// main.less
@import (reference) "mixins.less";
.box {
.mixin-a; // 只引用 mixin-a
}
在上述代码中，只有 .mixin-a 的样式会被输出，而 .mixin-b 的样式不会被包含在最终的 CSS 文件中。这样可以精确控制输出的 CSS 内容，避免冗余。
基于程序中某个输入、条件或结果的具体问题
如果在 @import (reference) 中引入了一个包含大量样式的文件，但只使用了其中一小部分，如何确保其他样式不被编译？答案是：只要不使用那些样式，它们就不会被编译。因此，关键在于只调用需要的混合宏或变量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
