根据预设配色方案，在前端动态切换系统主题色。大致思路是给html根标签设置一个data-theme属性，然后通过js切换data-theme属性值，Scss根据这个属性判断并使用对应的theme变量。这里可以选择持久化Vux或者interface来保存用户选择的主题。1.首先需要为项目下载并配置Scss。安装依赖npminstallnode-sasssass-loader--save-dev2。在build中找到webpack.base.conf.js，在rules中加入scssrules{test:/\.scss$/,loaders:['style','css','sass'v]}3.使用2.在vue项目global中引入scss1。安装sass-resources-loadernpm安装sass-resources-loader--save-dev2。然后修改build中的utils.js，修改scss:generateLoaders('sass')为：scss:generateLoaders('sass').concat({loader:'sass-resources-loader',options:{//自己的路径scss全局文件资源：path.resolve(__dirname,'../src/style/_common.scss')}})三、准备工作完成，准备开始1.新建一个Scss文件_themes.scss，在其中可以配置不同的主题配色方案//当HTMLdata-theme为dark时，样式引用dark//data-theme为其他值，使用组件库默认样式即可//这里我只定义了两组主题方案，如果你想要更多，就在`$themes`中添加//注意每个配色方案中的key是可以自定义的，但是一定要一致，否则会混淆$themes:(light:(//fontfont_color1:#414141,font_color2:white,//背景background_color1:#fff,background_color2:#f0f2f5,background_color3:red,background_color4:#2674e7,//borderborder_color1:#3d414a,),dark:(//fontfont_color1:#a7a7a7,font_color2:white,//背景background_color1:#1b2531,background_color2:#283142,background_color3:#1e6ceb,background_color4:#323e4e,//边框border_color1:#3d414a,));这里定义了一个map--$themes，里面分别存放了对应的themes注意，scss文件名建议使用下划线开头，比如_themes.scss，防止执行时被编译成单独的css文件。2、再定义一个sass文件_handle.scss来操作1中的$theme变量（当然也可以将两个文件合并单独编写，实现配置和操作解耦），上面代码：@import"./_themes.scss";//遍历主题map@mixinthemeify{@each$theme-name,$theme-mapin$themes{//!global将局部变量升级为全局变量$theme-map:$theme-map!global;//判断html的data-theme的属性值#{}是sass的插值表达式//&sass嵌套中的父容器标识@content是一个mixerslot,像vue的slot[data-theme="#{$theme-name}"]&{@content;}}}//声明一个根据Key获取颜色的函数@functionthemed($key){@returnmap-get($theme-map,$key);}//获取背景颜色@mixinbackground_color($color){@includethemeify{background-color:themed($color)!important;}}//获取字体颜色@mixinfont_color($color){@includethemeify{color:themed($color)!important;}}//获取边框颜色@mixinborder_color($color){@includethemeify{border-color:themed($color)!important;}}Themeify方法用于获取HTML数据-主题价值。themed方法用于根据HTMLdata-theme值和调用者传递的key从_themes.scss中获取对应的颜色。大家可以根据自己的使用场景自定义mixer，上面只定义了三种常用的background&border&fontcolors。3.在vue中具体使用，直接导入对应的混音器即可，选择什么颜色，传哪个键，就这么简单@import"@/style/_handle.scss";.common-util{字体大小：18px；@includefont_color("font_color1");@includebackground_color("background_color1");@includeborder_color("border_color1");3.使用js动态切换HTML属性data-theme的取值htmlDefault浅色深色js//改变主题theme(type){this.$store.commit('upDate',{themeType:type});window.document.documentElement.setAttribute("data-theme",type);}切换之后，你会发现你的cssselector前面多了东西[data-theme="dark"][data-theme="dark"].ivu-layout-sider,[data-theme="dark"].ivu-menu-light,[data-theme="dark"].ivu-layout-header{background-color:#283142!important;}到目前为止，你已经完成了！
