scss中导出的变量，在vue文件js中获取值不到值

vue中采用scss使用变量命名样式导出变量获取object为空

文件名 variables.scss

$menuText: #bfcbd9;
$menuActiveText: #ffffff;
$subMenuActiveText: #f4f4f5;

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
}

<sidebar 
class="sidebar-container"
:style="{ backgroundColor: variables.menuBg }"></sidebar>
import variables from '@/style/variables.scss'; 

标题修改文件名为variables.module.scss 则可以用

<sidebar
 class="sidebar-container"
 :style="{ backgroundColor: variables.menuBg }">
 </sidebar>
import variables from '@/style/variables.module.scss';