再整理一个项目中正在使用的换皮肤的功能

m目前的做法是将所有的颜色和背景图都作为变量放到body的属性里，然后在一个总的theme.scss文件里面把body的变量拿出来再赋给另一个变量，在其他scss文件里面要用的地方直接就用theme.scss文件中的变量就可以了。

首先是将所有的颜色和背景图都拿出来。

const Theme={
  'default':{white: "#FFFFFF", //后面继续加},  'theme':{white:"#000000"}
}
export default Theme

然后全部放到body里面去。

initColor=()=>{    let obj    // obj=Theme["default"]    if (this.props.engineStore.judgePeeling == 'deep') {      obj=Theme["default"]    } else {      obj=Theme["theme4"]     }    for(let key in obj){      document.getElementsByTagName('body')[0].style.setProperty(`--${key}`, obj[key]);    }  }

在一个总的theme.scss文件里面再定义各个小的scss需要用到的颜色变量。

//theme.scss
$white:var(--white);//后面还有就接着写

前面的$white是各个小的scss文件用到的变量，后面的--white是挂载到body的变量。

然后就可以在scss文件中直接使用了。

#root{
  color:$white;
}

这个them.scss文件可以在webpack中进行配置，否则就只有每个scss文件开头都引入。

配置的方法看这两篇文章：blog.csdn.net/weixin\_397…

blog.csdn.net/beamon\_\_/…