在前端开发过程中，我们通常会使用 LESS 来编写样式文件。但是在实际的项目中，我们也会使用一些已有的 CSS 文件，比如第三方 UI 库、自定义的全局样式等。那么如何在 LESS 文件中正确引入外部 CSS 文件呢？本文将详细介绍该问题的解决方案。
方法一：使用 @import 导入 CSS 文件
在 LESS 文件中，我们可以使用 @import 关键字来导入外部 CSS 文件。下面是一个简单的示例：
@import "path/to/external.css";
其中，path/to/external.css 表示外部 CSS 文件的路径。需要注意的是，该路径应该相对于当前 LESS 文件的位置。
使用 @import 导入的外部 CSS 文件将会被作为整个 LESS 文件的一部分进行编译。这意味着，如果外部 CSS 文件中有一些样式规则与当前 LESS 文件中的规则冲突，就会导致编译出错。
为了避免这种情况的发生，我们可以使用下面介绍的方法。
方法二：使用 less-plugin-clean-css 插件压缩 CSS 文件
less-plugin-clean-css 是一个 LESS 插件，它可以将导入的 CSS 文件压缩并加以处理。使用该插件，我们可以轻松地实现在 LESS 文件中引入外部 CSS 文件的目的，并确保编译过程的顺利进行。
使用该插件的方法如下：
安装 less 和 less-plugin-clean-css：
npm install --save-dev less less-plugin-clean-css
在 LESS 文件中使用
@plugin指令引入插件：@plugin "less-plugin-clean-css";
使用
@import导入 CSS 文件：@import "path/to/external.css";
这样，在编译 LESS 文件时，less-plugin-clean-css 就会自动将导入的 CSS 文件进行压缩和处理。
方法三：使用 postcss-import 插件处理 CSS 文件
除了 less-plugin-clean-css 外，我们也可以使用 postcss-import 插件来处理 CSS 文件的导入。该插件可以通过 PostCSS 工具链自动处理 CSS 文件，从而避免了手动压缩和处理的繁琐过程。
使用该插件的方法如下：
安装 less、postcss 和 postcss-import：
npm install --save-dev less postcss postcss-import
在 LESS 文件中使用
@import导入 CSS 文件：@import "path/to/external.css";
使用 postcss-cli 工具来编译 LESS 文件：
postcss input.less -o output.css
其中，input.less 为要编译的 LESS 文件，output.css 为编译后的 CSS 文件。
经过上面的步骤，我们就可以顺利地在 LESS 文件中引入外部 CSS 文件并成功编译了。
总结
本文介绍了三种在 LESS 文件中引入外部 CSS 文件的方法：使用 @import 导入、使用 less-plugin-clean-css 插件处理、使用 postcss-import 插件处理。使用这些方法可以帮助我们在实际项目中更好地组织样式文件，并提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b8be68add4f0e0ff1524cc