less中:export 无效问题，vue-cli中导出公共变量，js对象为空对象

1、版本：

vue：2.6.14
@vue/cli：5.0.8

2、全局变量文件：

// variables.less
@themeColor: #00978D;
@pageBgColor: #f2f8f7;

// CSS Module 有一个:export关键字，它在功能上等同于 ES6 的关键字export，即导出一个 js 对象。
:export {
  name: "less";
  themeColor: @themeColor;
}

3、vue中使用：把样式变量共享给js使用

<template>
  <div id="app" class="box"></div>
</template>

<script>
import variables from './styles/variables.less';
export default {
  data() {
    return {
      variables,
    };
  },
  created() {
    console.log(this.variables, "variables");
  }
};
</script>

注：在vue-cli v5版本中requireModuleExtension是已经被移除了。在没有任何配置的情况下打印出来的就是一个空对象

4、解决方案

通过阅读官方文档，发现可以根据约定将文件名改为.module.(css|scss|sass|less|styl(us)?)结尾，这样就可以识别出css module。

这里是将自己项目中的variables.less改成了variables.module.less，可以发现确实生效可以获取到正常的js对象。