在前端开发中，CSS 是一门常用的样式语言，但随着项目的复杂度不断增加，样式文件会越来越庞大，难以维护。LESS 是一种 CSS 预处理器，它使样式表更易于维护、更加灵活。在本文中，我们将介绍如何加载外部 LESS 文件并将其编译成 CSS。
准备工作
在使用 LESS 之前，我们需要安装 LESS 的编译工具。在这里我们推荐使用 lessc，同时我们需要在项目的根目录下建立一个 src 目录，用于存放 LESS 文件和编译后的 CSS 文件。
加载 LESS 文件
首先，我们需要在 HTML 文件的 <head> 标签内添加以下代码：
<link rel="stylesheet/less" type="text/css" href="src/style.less" /> <script src="https://cdn.jsdelivr.net/npm/less"></script>
这段代码指定了 LESS 文件的位置，并通过 <script> 标签引入最新版的 Less.js 库。需要注意的是，type 属性需要设置为 stylesheet/less，这是告诉浏览器要将这个文件当做 LESS 文件来处理。
编译 LESS 文件
当浏览器加载 LESS 文件后，它并不能直接渲染在页面上，而是需要经过编译处理，将 LESS 语法转换成 CSS 语法。我们可以通过以下命令将 LESS 文件编译成 CSS 文件：
lessc src/style.less src/style.css
这会将 src/style.less 文件编译成 src/style.css 文件。当然，我们也可以使用 less-watch-compiler 自动监视 LESS 文件的变化并自动编译：
npm install -g less-watch-compiler less-watch-compiler src src
示例代码
-- -------------------- ---- -------
--------- -----
------
------
----------- ---- ------ -----------
----- --------------------- --------------- --------------------- --
------- -------------------------------------------------
-------
------
---- ------------------
---------- -----------
------
-------
-------src/style.less 文件内容：
-- -------------------- ---- ------- --------------- -------- ---------- - ---------- ------ ------- - ----- - -- - ---------- ----- ------ --------------- -
编译后的 src/style.css 文件内容：
.container {
max-width: 960px;
margin: 0 auto;
}
h1 {
font-size: 3rem;
color: #007bff;
}总结
本文介绍了如何加载外部 LESS 文件并将其编译成 CSS，通过使用 LESS，我们可以轻松地编写更加灵活、易于维护的样式文件，提高前端开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6479444f968c7c53b0548d25