LESS 是一种动态的样式表语言，它属于 CSS 预处理器的一种。LESS 在基础 CSS 的基础上，引入了变量、混合器、函数等新的特性，极大地拓展了 CSS 的能力。LESS 还支持将多个 LESS 文件编译成一个 CSS 文件，这样可以方便地管理和维护样式。
但是，在开发过程中，我们通常会遇到需要引入外部的 CSS 文件的情况，比如使用第三方 CSS 库、引用 CDN 上的文件等。这时，我们该如何在 LESS 中引入外部的 CSS 文件呢？
方法一：使用 @import
在 LESS 文件中，我们可以使用 @import 指令来引入外部的 CSS 文件。@import 指令的格式如下：
@import (options) url;
其中，options 是可选项，可以设置一些导入选项，url 则是必填项，表示需要导入的文件路径。举个例子，下面的代码将导入 font-awesome.css 文件：
@import (less) "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css";
这里我们指定了 options 选项为 less，表示将导入的 CSS 文件当作 LESS 文件进行处理，这样就可以使用 LESS 的语法来编写这个 CSS 文件了。默认情况下，@import 指令导入的文件会以 CSS 文件的形式进行处理。
需要注意的是，使用 @import 指令导入的文件会导致多个 CSS 文件被合并成一个，这可能会影响网站的性能。因此，在实际开发中，我们应该尽量避免使用 @import 指令，而是通过其他方式来引入 CSS 文件。
方法二：使用 link 标签
另外一种引入外部 CSS 文件的方式是使用 link 标签。我们可以在 HTML 文件中使用 link 标签来引入 CSS 文件，这个文件可以是普通的 CSS 文件，也可以是 LESS 文件。
例如，下面的代码将引入两个外部 CSS 文件：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------------- --------------- ------------------
----- ---------------- --------------- ----------------------------------------------------------------------------------
-------
------
---- --- ---
-------
-------这里我们使用 link 标签分别引入了 style.less 和 all.min.css 两个文件。其中，rel 属性指定了加载的文件类型，type 属性指定了文件的 MIME 类型。
需要注意的是，当我们使用 LESS 文件时，我们需要在 type 属性中指定为 "stylesheet/less"，而不是传统的 "text/css"。这是因为 LESS 需要先编译成 CSS 文件才能使用，而 "stylesheet/less" 类型的文件会被处理成 CSS 文件，因此不需要再次编译。
总结
通过上述两种方式，我们可以在 LESS 中引入外部的 CSS 文件。其中，使用 link 标签的方式更为常见和稳定，而 @import 指令的方式则更灵活，可以实现更多定制化的需求。在实际开发中，我们应该按照具体情况来选择合适的方式，并注意文件的加载顺序和性能问题。
附：示例代码
在本文中，我们以 font-awesome.css 文件为例，演示了如何在 LESS 中引入外部 CSS 文件。下面是完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------------- --------------- ------------------
----- ---------------- --------------- ----------------------------------------------------------------------------------
-------
------
---- ------------------
-- ---------- -------------
-- ---------- -----------------
-- ---------- ------------
------
-------
--------- -------------------- ---- -------
------- ------ -----------------------------------------------------------------------------
---------- -
-------- -----
---------------- -------
----------- -----
- -
---------- -----
------------ -----
------------- -----
-
-在上面的例子中，我们在 HTML 文件中引入了两个外部的 CSS 文件，并在 LESS 文件中使用了 font-awesome.css 文件中定义的样式。最终，我们实现了三个使用 Font Awesome 图标的效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645605d0968c7c53b0951b08