页面换肤

场景需求

项目中一些页面需要换成另一种UI风格；并不是所有的页面都换UI展示；

思路

通过路由来判断此页面用哪一套UI

步骤

1、定义theme.scss全局文件

以下代码全为演示所用

$color: var(--color, #ffd029);
$border-color: var(--border-color, #ff9595);

2、把theme.scss通过webpack的loaderOptions进行全局引入

具体可参考文档
注意！！由于sass-loader版本不同，loaderOptions中prependData的名字也不同；

sass-loader v8-中，为"data"
sass-loader v8中，为"prependData"
sass-loader v10+中，为"additionalData"

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/assets/theme.scss";`,
      },
    },
  },
  }

设置完webpack的loaderOptions，最好重新开启一下服务，这时你声明的颜色变量已经可以正常显示了

3、定义变换的UI变量对象

生成theme.js文件，如下

export const darkTheme = {
    '--color':"#40a9ff",
    "--border-color": "#d9d9d9",
};

4、在路由中设置

import { darkTheme } from "@/assets/theme.js";

router.afterEach((to, from) => {
 //根据自己的需求来定义怎么显示
  if (to.matched.some(r => r.meta.theme === 'dark')) {
    toggleTheme(darkTheme);
  } else {
    toggleDefaultTheme();
  }
});

function toggleTheme(theme) {
  for (let i in theme) {
    document.body.style.setProperty(i, theme[i]);
  }
}

function toggleDefaultTheme() {
  document.body.style = "";
}

这时只要去判断路由上的meta即可；

关于CSS、SCSS全局变量声明与使用

总结

1、document.body.style.setProperty('--color', '#222')，给body的style添加样式变量；

2、theme.scss中，$color: var(--color, '#888')它意为scss中使用css的全局变量值；
var()函数是用来引用css的变量值的，var(--color, '#888')意思是去找css的全局变量--color，找到了就用它的值（也就是第一步中设置的#222），若在css中找不到--color变量，则使用第二个参数的值#888；

3、在style中使用scss的变量值

<style lang="scss" scoped>
div{
  color: $color;
}
</style>