处理全局样式

示例 本次采用vite+vue3

首先在@/themes/variable.scss文件 创建

:root {
	--bg-color: #22416f; //默认背景颜色
  --color: rgb(39, 204, 207);
  --el-color-primary:#fff;
}
 

$bg-color: var(--bg-color); //默认背景颜色
$color:var(--color);
$All-color: var(--el-color-primary)

通过vite的css进行全局配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
  base: '/',            //阿里云
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  css: {
    preprocessorOptions: {
      // 在这里设置全局样式
      scss: {
        additionalData: '@use "@/themes/variable.scss" as *;'
      }
    }
  },

  server:{
    port: 110,
    open: true,
    proxy: {
    },
  }
})

设置完成后就可以直接在页面的样式里面使用

&-text {
  width: 100%;
  color: $color;
}

点击切换主题色 v3

<script setup lang='ts'>
import { ref } from "vue"

const flag = ref(true)
// 切换主题色
const clickSwitch = () => {
  if (flag.value) {
    document.body.style.setProperty("--el-color-primary", "#333")
    document.body.style.setProperty("--color", "#fff")
    flag.value = false
  } else {
    document.body.style.setProperty("--el-color-primary", "#fff")
    document.body.style.setProperty("--color", "rgb(39, 204, 207)")
    flag.value = true
  }
}
</script>