scss变量动态修改_如何动态改变scss中$iconbg: #354052;的变量

网上大部分写法

//common.css
$mainBgImg:var('--bg','url(/img/bg/ldyc.png)');
.theme-star .avue-contail {
  background-image: $mainBgImg;
  background-size: 100% 100%;
//js 这个.theme-star是绑定在<body>上的
document.getElementsByClassName('theme-star')[0].style.setProperty('--bg', 'url(/img/bg/bg_zhu.png)');
前提
 上述写法，对于我来说没有效果，甚至原来的背景图片也没有了，原来的写法是这个的 
//common.css
$mainBgImg:url('/img/bg/ldyc.png');
网上很多都是这种,解决方法也是这种，那就证明var()设置还是有用的，估计就出在$mainBgImg:var('--bg','url(/img/bg/ldyc.png)');这步了，写法估计有点问题，毕竟这么一写，原来的背景图片都不能用了。
 后续，我直接去找css变量的文档，然后就发现了这么一段话。
 
 说明链接：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties 
发现华点，这个用法，好像跟第一个用法有点不一样，他是在css属性里面定义变量，变量命名规则在上面展示了，说改就改。 
.theme-star {
  --bg: url('/img/bg/ldyc.png')
$mainBgImg:var(--bg);
写到这里我就发现是可以用的，原来的背景图片也能展示了，那就证明是对的，完整代码下面 
//common.css
//背景图片
.theme-star {
  --bg: url('/img/bg/ldyc.png')
$mainBgImg:var(--bg);
//这里不变
.theme-star .avue-contail {
  background-image: $mainBgImg;
  background-size: 100% 100%;
//js 这个.theme-star是绑定在<body>上的
document.getElementsByClassName('theme-star')[0].style.setProperty('--bg', 'url(/img/bg/bg_zhu.png)');
到此，圆满结束，后续就可以通过公共文件接口去更改相关的背景图片了
 <view class="dark-bg" :style="{'--text-color': color}"> // 注意这里的 text-color
    <view class="h2">测试组件</view>
      <select-theme></select-theme>
    </view>