在前端开发中，我们经常使用 LESS 来进行 CSS 预处理，但是在使用 LESS 编译器时，有时会遇到 @import 语句异常的问题，这个问题表现为 LESS 编译器无法正确读取和解析 @import 语句，从而导致 CSS 样式不正确或者编译失败。
如何解决这个问题呢？本文将从以下几个方面来为大家详细介绍。
问题分析
在开始解决问题之前，我们首先需要了解这个问题的出现原因。通常情况下，这个问题有两个主要原因：
路径问题。当我们使用了相对路径或者绝对路径时，LESS 编译器可能无法正确识别文件路径，导致编译失败。
文件类型问题。在使用 @import 语句时，我们需要确保正确引用的文件是一个 LESS 文件。
解决方法
基于以上两个问题，我们可以采取以下措施来解决 @import 语句异常的问题：
- 相关路径处理。为了避免路径问题导致 @import 失败，我们可以采取以下措施：
（1）使用相对路径。相对路径可以保证文件引用的正确性，因此我们可以使用相对路径来避免路径问题。比如：
@import "../common/common.less";
（2）使用绝对路径。绝对路径可以完全保证文件引用的正确性，但是需要确保操作系统对路径的支持，因此我们需要先确定绝对路径的正确性再使用。比如：
@import "/Users/myname/project/common/common.less";
- 文件类型处理。为了避免文件类型问题导致 @import 失败，我们需要确保引用的文件是一个 LESS 文件。如果引用的是一个 CSS 文件，则需要使用 “less-plugin-clean-css” 插件实现 CSS 文件的编译。示例代码如下：
npm install less-plugin-clean-css -g lessc --clean-css styles.less > styles.css
总结
在前端开发中，我们经常使用 LESS 来进行 CSS 预处理，但是在使用 LESS 编译器时，有时会遇到 @import 语句异常的问题。本文通过分析问题的原因，总结出了两个解决方法，分别是路径问题和文件类型问题的处理。希望大家通过本文的学习和实践，能够更熟练地使用 LESS，并避免遇到这样的异常问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651d1df795b1f8cacd4a2925