js 与scss共享变量

在scss中通过:export导出，在js中通过esm导入 :export的是一个 全局变量

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
  hideSideBarWidth: $hideSideBarWidth;
  sideBarDuration: $sideBarDuration;
}

import variables from '@/styles/variable.scss'
console.log(variables)

输出结果如下：

参考资料

在vue中如何把scss的变量与js共享 - 简书 (jianshu.com)