问题背景
在前端开发过程中，我们经常使用 LESS 这样的 CSS 预处理器来增加代码的可维护性和复用性。LESS 具有很多特性，比如变量、混合、嵌套等，可以大大降低 CSS 编写的难度。但是有时候在使用 LESS 过程中，我们可能会遇到编译报错，其中比较常见的就是错误提示：“expected expression, was 'import'”。
问题分析
在我们编写 LESS 代码的时候，经常会用到 @import 指令来引入其他 LESS 文件，例如：
@import "reset.less";
但是，在某些情况下，使用 @import 引入文件时，会出现如下错误提示：
SyntaxError: expected expression, was 'import'
这是因为默认情况下，许多浏览器并不支持在 CSS 文件中使用 @import 导入其他 CSS 或 LESS 文件。因此，在将 LESS 文件编译成 CSS 文件时，LESS 编译器会将所有的文件合并成一个文件，然后才将其发布到浏览器中。但是，如果引入的文件中包含了错误的语法，就会导致整个编译过程出错，从而出现上述提示信息。
解决方法
为了解决上述问题，我们可以使用以下两种解决方法。
方法一：使用 @import (reference) 指令
从 LESS v3.5.0 开始，新增了一种引入方式 @import (reference)，可以避免上述问题。它不会将引入的文件直接合并到当前文件中，而是将其作为外部文件引入，并在编译时动态查找这些外部文件。因此，如果引入的文件中包含语法错误，就不会影响编译过程，从而避免了编译报错的问题。
使用方法如下：
@import (reference) "reset.less";
在使用 (reference) 指定方法后，@import 指令就和普通的 CSS 引入语句一样了。经过编译后，这些文件也会被单独发布到浏览器中，而不是合并到当前文件中。
方法二：在 Nginx 或 Apache 中配置 MIME 类型
另一种解决方法是在 Nginx 或 Apache 中配置 MIME 类型，以支持在 CSS 文件中使用 @import 指令。这种方法比较麻烦，需要管理员权限，且需要对服务器的配置文件进行修改。但是，它可以让我们在引入文件时直接使用 @import 指令，更加方便快捷。
在 Nginx 中，可以通过修改 nginx.conf 文件中的 mime.types 属性来添加 CSS 文件的 MIME 类型，如下所示：
types {
...
text/css css;
text/less less;
...
}在 Apache 中，可以打开 .htaccess 文件，并添加以下配置项：
AddType text/less .less AddOutputFilterByType DEFLATE text/css text/less
这里，我们将 .less 文件的 MIME 类型定义为 text/less，然后使用 DEFLATE 压缩算法对 CSS 文件和 LESS 文件进行压缩，并设置两者的 MIME 类型为 text/css 和 text/less。
总结
使用 LESS 过程中遇到 “expected expression, was 'import'” 报错可以通过以下两种方法来解决：
- 使用 @import (reference) 指令引入文件，避免将文件直接合并到当前文件中。
- 在 Nginx 或 Apache 中配置 MIME 类型，以支持在 CSS 文件中使用 @import 指令。
对于前端开发人员而言，深入理解 LESS 的特性及其使用方法，对于提高 CSS 代码的可维护性和复用性具有重要意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a0fd2048841e9894d41a5e