根据css3的:root实现项目的主题切换功能

在项目开发中，需要实现主题切换功能，然后使用css3的 :root 伪类和 var() 实现主题中引用不同颜色的。

1. 首先定义多个主题文件，里面定义对应的颜色变量

 

 

 

 2. 在main.js中根据当前的主题颜色，引用对应的scss主题文件。（ps：每次主题更换都将主题的值暂存在sessionStorage）

 

 

提示：使用 require引用文件时，require的路径一定要清晰，不可以包含变量，不然打包会有问题：

 

 这就是require路径包含变量，打包后会发现2份主题都引入了，就无法实现主题的切换。不过可以使用不同类名如【.root-green、.root-blue】来控制，实现主题的切换，但element-ui的主题就切换不了。

所以根本还是注意路径不要包含变量

 

 

 

 

 3. 在main.js中引用了对应的主题文件后，在开发中需要某个颜色，则使用 【var(颜色变量)】

 

最后效果：