基于vite Sass自定义Element Plus主题色

安装Element Plus

 npm install element-plus --save

引入Element Plus

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

自定义主题

1. 新建styles/element/index.scss文件

/* 只需要重写你需要的即可 */
//styles/element/index.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': green,
    ),
  ),
);

2. 项目入口文件中，导入样式文件index.scss

// main.ts
import { createApp } from 'vue'
///
//在 element-plus文件之前导入
import './styles/element/index.scss'
//
import ElementPlus from 'element-plus'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

注意：在 element-plus文件之前导入element/index.scss