1.安装Scss
npm i scss -D
2.准备定制化样式文件
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
$colors: (
'white': #ffffff,
'black': #000000,
'primary': (
'base': #27ba9b,
),
'success': (
'base': #1dc779,
),
'warning': (
'base': #ffb302,
),
'danger': (
'base': #e26237,
),
'error': (
'base': #f56c6c,
),
'info': (
'base': #909399,
),
),
);
3.自动导入配置
1.配置elementPlus采用sass样式配色系统
2.自动导入定制化样式文件进行样式覆盖
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
//element-plus按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [
// 1.配置elementPlus采用sass样式配色系统
ElementPlusResolver({importStyle:"sass"})
],
}),
vue(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
css: {
preprocessorOptions: {
scss: {
// 2.自动导入定制化样式文件进行样式覆盖
additionalData: `@use "@/styles/element/index.scss" as *;`,
}
}
}
})