vue3 + vite element-plus自定义主题色

一、在项目根目录新建element/index.scss内容如下：

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': red,//颜色可与自定义的
    ),
  ),
);
//此处是动态计算px的，与自定义主题色无关的
@use "sass:math";
$defaultWidth:1920;
$defaultHeight:1080;
@function vw($px) {
  @return math.div($px,$defaultWidth)* 100vw
};

@function vh($px) {
  @return math.div($px,$defaultHeight)* 100vh
};

@function font($px){
  @return math.div($px,$defaultWidth)* 100vw
}

二、下载官方推荐的两个vite插件
 

npm install -D unplugin-vue-components unplugin-auto-import

三、在vite.config.js中引入

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver({
        importStyle: "sass",
      })],
    }),
    Components({
      resolvers: [ElementPlusResolver({
        importStyle: "sass",
      })],
    }),
  ],
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './'),
      '@': path.resolve(__dirname, './src')
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "@/styles/element/index.scss" as *;`,
      },
    },
  },
})

四、使用

//弹窗的使用
<script setup>
import {onMounted} from 'vue'
//import {ElMessageBox} from 'element-plus'
//注意这里不要再次引入否则样式会不生效

onMounted(()=>{
  ElMessageBox.alert('This is a message', 'Title', {
    confirmButtonText: 'OK',
    callback: (action) => {
     
    },
  })
})
</script>

//其他组件正常使用即可
<template>
   <div class="mb-4">
    <el-button>Default</el-button>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </div>
  <el-date-picker
      v-model="value1"
      type="monthrange"
    />
</template>