0x00 问题描述

在用vue3写后台管理的时候遇到的一个比较坑的问题，代码如下

variables.scss

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

$menuBg: #304156;
$menuHover: #263445;

$subMenuBg: #1f2d3d;
$subMenuHover: #001528;

$sideBarWidth: 210px;
$hideSideBarWidth: 67px;
$sideBarDuration: 0.28s;


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

可是在界面上却发现asideWidth的值是空的，控制台也打印出了undefined，啥情况。

0x01 解决办法

找了半天也没发现什么问题，最后在 https://segmentfault.com/q/1010000040347836 这篇文章中发现在.scss文件名前面加上.module这个办法。于是本着试一试的想法重新改了下代码，没想到真的可以！