1.scss引入其它变量

$menuText:#000000;
$menuActiveText:#ffffff;
$subMenuActiveText:#E6A23C;

$menuBg:#ffffff; // sidebar背景色
$menuHover:#ffffff;

$subMenuBg:#ffffff;
$subMenuHover:#E6A23C;
//--sideWidth 为变量名
$sideBarWidth: var(--sideWidth,280px);
$topHeight:var(--th,117px);

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

2.js中使用

import variables from '@/styles/common/variables.scss'

data(){
    return{
        color:variables.menuBg
    }
}

3.js中修改

 document.getElementsByTagName("body")[0].style.setProperty("--sideWidth","0px");