当前项目使用的后台管理模板的 layout 的部分是有直接引用 sass 文件暴露出来的变量在业务代码中使用的。
比如说:

• 导出 👉 /src/styles/variables.scss at v4.0.0 · PanJiaChen/vue-element-admin
• 使用 👉 /src/layout/components/Sidebar/index.vue at v4.0.0 · PanJiaChen/vue-element-admin

也没有怎么了解过看这个魔法使用的来源文章 中也只说是 webpack 支持了 CSS Modules 的功能，可以直接使用 :export 功能。

只需要在 .scss 中使用 :export { } 把需要暴露的变量暴露出来就可以在 JS 中使用 import 导入了

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