LESS 中 @import 引入的注意事项
LESS 是一种动态样式语言，它可以简化 CSS 的书写过程，并提供了更灵活、更强大的样式定义功能。在 LESS 中，我们可以使用 @import 来引入其他 LESS 文件，以便在当前文件中使用其中定义的变量、混合器（Mixins）和函数。不过，@import 也有一些需要注意的地方，下面我们就来详细了解一下。
- @import 引入的顺序
LESS 中的 @import 指令是按照引入顺序进行编译的，也就是说，被引入的文件会在引入它的文件之前编译。这个顺序对定义变量、混合器和函数的使用十分重要，如果引入的文件里定义的变量还没编译就被使用，将会导致编译错误。
因此，最好的做法是把需要的变量、混合器和函数单独放在一个文件里，在主 LESS 文件中最开始引入，这样可以保证被引入的文件在编译时已经被处理完毕。
以下代码片段演示了这种用法：
-- -------------------- ---- -------
-- -------------- ------
--------------- --------
---------------- -----
-- ----------- -------
----------------------- -
---------------------- --------
------------------- --------
-------------- --------
-
-- --------- --------
------- -----------------
------- --------------
-- ----------
---- -
---------- ----------------
----------------- ---------------
--------------------
-- @import 的路径
在使用 @import 引入文件时，需要注意要写正确的路径，否则会引入失败。LESS 支持相对路径和绝对路径，当使用相对路径时，需要根据当前文件所在目录进行计算。如果引入的文件不在当前目录下，还需要递归调用引入，直到找到文件所在目录为止。
以下代码片段演示了相对路径的用法：
// 在 a.less 文件中引入 b.less 文件 @import "b.less";
如果 b.less 文件位于 a.less 文件的同级目录下，可以使用相对路径 "b.less"。
如果 b.less 文件位于 a.less 文件的上级目录中，可以使用 "../b.less"。
如果 b.less 文件位于 a.less 文件的任意下级目录中，则需要递归调用引入，例如 "../../example/b.less"。
- @import 的文件类型
@import 指令可以引入任何类型的文件，不仅仅是 LESS 文件，当引入的文件类型为 CSS 时，需要使用 LESS 的 @import-once 指令，这样可以确保文件只会被引入一次。
以下代码片段演示了引入 CSS 文件的用法：
// 在 main.less 文件中引入 style.css 文件，并确保只被引入一次 @import-once (less) "style.css";
- @import 的嵌套
LESS 中的 @import 指令支持嵌套使用，也就是在一个 LESS 文件中引入另一个 LESS 文件，并在被引入的 LESS 文件中再引入其他文件。当 LESS 文件被嵌套多层时，需要注意文件顺序和路径问题，否则会出现编译错误。
以下代码片段演示了嵌套引入的用法：
// a.less 中引入 b.less，b.less 中引入 c.less @import "b.less"; // b.less 中引入 c.less，同时引入 d.less @import "c.less"; @import "../lib/d.less";
总结
在 LESS 中使用 @import 引入其他文件，需要注意文件的编译顺序、文件路径、文件类型和嵌套。正确使用 @import 可以帮助我们更好地组织 LESS 代码，提高开发效率和代码可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f963aff6b2d6eab30e6665