vue3+vite+less 实现简单换肤

1.实现思路

主要通过切换class改变全局变量，实现换肤。

2.实现过程

先上主要文件目录结构

1.创建主题函数

在assets/style下创建theme.less

.theme(
    @primary-color: #0078fe;
) {
  --primary-color: @primary-color;
}

2.创建全局变量

在assets/style下创建variables.less

@import './theme.less';
// 默认样式，使用默认颜色值
.theme-default {
  .theme();
}
// 红色主题
.theme-red {
  .theme(red);
}
@primary-color:var( --primary-color);

3.引用主题文件

在main.js中引入variables.less文件

import '@/assets/style/variables.less'

4.配置vite.config.js

  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
        modifyVars: {
          hack: `true; @import (reference) "${resolve('src/assets/style/variables.less')}";`
        }
      }
    }
  }

5.页面上使用

    <button @click="changeTheme('default')">默认主题</button>
    <button @click="changeTheme('red')">红色主题</button>

<script setup>
const changeTheme = (theme) => {
  switch (theme) {
    case 'default':
      document.documentElement.className = 'theme-default'
      break
    case 'red':
      document.documentElement.className = 'theme-red'
      break
  }
}
</script>

<style lang="less" scoped>
span {
  color: @primary-color;
}
</style>

6.实现结果