LESS 资源引用的绝对和相对路径的转换

LESS 是一种 CSS 预处理器，它提供了许多便于开发的语法和功能，其中资源引用是一个重要的功能。资源引用可以包括 CSS 文件、图片文件、字体文件等等，而引用方式可以使用绝对路径或者相对路径。本文将详细介绍LESS资源引用中的绝对路径和相对路径的使用方法。

相对路径

相对路径是从当前文件所在的目录开始计算的路径，可以参考下面的示例：

// 当前文件路径为：/src/common/index.less
.bg {
  background: url('../images/bg.png');
}

上述代码引用了当前目录的上一级目录下的 /src/common/images/bg.png 文件。这种方式非常实用，但在不同目录下的文件之间引用时需要特别注意路径问题。

同时，如果当前文件和引用资源的文件不在同一目录下，则需要手动更改路径。这种问题可以使用 REM 单位或者 LESS 的工具类来解决。

绝对路径

绝对路径其实就是完整的路径，通常以 / 符号开头，它指向的是 web 服务器的物理路径。这种方式在前端开发中也非常实用，可以避免路径计算上的问题，比如：

.bg {
  background: url('/src/common/images/bg.png');
}

上述代码中使用了绝对路径，它在整个项目中都是一致的。

路径的转换

在LESS开发中，经常需要在相对路径和绝对路径之间进行转换。下面我们来介绍两个工具类函数，分别用于两种路径的转换。

~ 符号

~ 符号可以用于将相对路径转换成相对路径：

.bg {
  background: url('~assets/images/bg.png');
}

上述代码引用了 assets/images/bg.png 文件，而在实际渲染时，LESS 会将路径 /node_modules 目录下的资源通过 ~ 符号自动转换成相对路径，这是很方便的一个功能。

modifyVars 函数

modifyVars 函数可以用于将相对路径转换成绝对路径：

@icon-font-path: "assets/fonts";

@import "src/index.less";

// 将相对路径转换成绝对路径
@icon-font-path: "http://cdn.com/assets/fonts";

@import "src/index.less";

上述代码引入了 src/index.less 文件，并使用了一个变量 icon-font-path， 它将 assets/fonts 相对路径转换成了绝对路径 http://cdn.com/assets/fonts。这种方式在前端开发中很常用。

总结

本文主要介绍了 LESS 资源引用中的绝对和相对路径的转换方法，通过详细的讲解和示例代码，帮助读者更好地理解和使用 LESS 的资源引用功能。在实际开发中，需要根据具体情况进行选择，切勿滥用，避免代码混乱不堪或出现路径计算错误。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6473325e968c7c53b00b1858