vue项目使用less，结果报错Unkown word

创建一个test.less文件，里面使用了循环，内容如下：

.font(@i) when(@i <= 28){
  f@{i} {
     font-size: @i + 0px ;
  }
  .font((@i + 2));
}


.font(12);

然后在vue文件中导入这份文件：

<style>
@import '../test.less';
</style>

运行项目，报错：

从报错信息中可以看出是postcss-loader解析错误。这是什么疑难bug！顿时血压飙升。

继续看控制台报错：

从红框区域可以看到依次调用了vue-loader、cache-loader、postcss-loader、vue-loader、css-loader，奇怪，为什么没有出现less-loader？

最后想明白了，原来问题是我引入less的vue文件中，没有指定<style lang="less">：

<style>
@import '../test.less';
</style>