最近在尝试的搭建vue2框架，遇到了一个问题scss中导出的变量，在vue文件js中获取值为undefine

1.首先，在scss中配置要导出的变量

/* variables.scss */

$yellow: #f6d80c;
:export {
  yellow: $yellow;
}

2.在vue文件导入变量并使用

<template>
  <div>
    <h1>This is a H1 Title with color yellow.</h1>
    <!-- 这里的active-color可以使用import的variables变量-->
    <el-switch v-model="var1" :active-color="variables.yellow"> </el-switch>
  </div>
</template>

<script>
/* 引入变量样式文件 */
import variables from '@/style/variables.scss';

export default {
  data() {
    return {
      var1: true,
      variables, // 使用scss的:export的变量
    };
  },
};
</script>

<style lang="scss" scoped>
/* 引入变量样式文件 */
@import "~@/styles/variables.scss"; 
  h1{
    color: $yellow;
  }
</style>

理论上这样就行了，但是经测试style中进行@import样式是生效的$yellow变量值也是正常传递，但是在js中variables.yellow始终undefine,查看了CSS Modules

你可以通过 <style module> 以开箱即用的方式在 *.vue 文件中使用 CSS Modules。
如果想在 JavaScript 中作为 CSS Modules 导入 CSS 或其它预处理文件，该文件应该以 .module.(css|less|sass|scss|styl) 结尾：

任何以 .module.css （scss最终会翻译成css）为后缀名的 CSS 文件都被认为是一个 CSS modules 文件。导入这样的文件会返回一个相应的模块对象；

解决方案：

将对应文件名variables.scss改为variables.module.scss，

script引入：import variables from '@/style/variables.module.scss';

style引入：@import "~@/styles/variables.module.scss";