如何在 js 中使用 less 的全局变量

1、在 less 文件中定义变量并将其导出为 js，CSS Module 有一个:export关键字，它在功能上等同于 ES6 的关键字export，即导出一个 js 对象。

Less

// ./styles/variables.less

@themeColor: #00978d;

// 导出变量
:export {
    exportedKey: @themeColor; 
}

2、在需要使用的页面导入

HTML

<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>