场景需求
项目中一些页面需要换成另一种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即可；
总结
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>
