1、新建scss文件：src/styles/element/index.scss

// @/styles/element/index.scss

@forward "element-plus/theme-chalk/src/common/var.scss" with ($colors: (

"primary": ("base": #0052D9),

"success": ("base": #67c23a),

"warning": ("base": #e6a23c),

"danger": ("base": #E34D59),

"error": ("base": #E34D59),

"info": ("base": #E7E7E7),

)

2、vite.config.js配置

import { defineConfig } from 'vite'

import vue from '@vitejs/plugin-vue'

import WindiCSS from 'vite-plugin-windicss'

// import legacy from '@vitejs/plugin-legacy'

import { resolve } from 'path'

import compressPlugin from 'vite-plugin-compression'

import vueJsx from '@vitejs/plugin-vue-jsx'

import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

import AutoImport from "unplugin-auto-import/vite"

import Components from "unplugin-vue-components/vite"

import { ElementPlusResolver } from "unplugin-vue-components/resolvers"

// import ElementPlus from "unplugin-element-plus/vite"

import { createStyleImportPlugin, ElementPlusResolve } from "vite-plugin-style-import"

import * as path from 'path'

export default ({ mode }) => {

console.log('mode:', mode)

const isDevelopment = mode == 'development'

const target = isDevelopment ? 'crm-dev' : 'crm'

return defineConfig({

resolve: {

alias: {

'@': resolve('./src'),

'@img': resolve('./src/assets/image')

}

},

css: {

preprocessorOptions: {

scss: {

additionalData: '@use "@/assets/sass/globalstyle.scss" as *;'

}

}

},

plugins: [

createStyleImportPlugin({

resolves: [ElementPlusResolve()],

libs: [

{

libraryName: 'element-plus',

esModule: true,

resolveStyle: (name: string) => {

return `element-plus/theme-chalk/${name}.css`

}

}

]

}),

vue(),

WindiCSS(),

vueJsx(),

AutoImport({

imports: ["vue", "vue-router"], // 自动导入vue和vue-router相关函数

dts: "src/auto-import.d.ts",// 生成 `auto-import.d.ts` 全局声明

}),

Components({

resolvers: ElementPlusResolver({

importStyle: 'sass'

})

}),

compressPlugin({

deleteOriginFile: true,

disable: true, // 禁用压缩

}),

createSvgIconsPlugin({

// 指定需要缓存的图标文件夹

iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],

// 指定symbolId格式

symbolId: 'icon-[dir]-[name]',

}),

// legacy({

// targets: ['defaults', 'not IE 11']

// })

],

// base: 'https://crm-dev.fangxiaobao.net/pc_frontend_assets/',

base: isDevelopment ? '/' : '/pc_frontend_assets',

build: {

manifest: true,

minify: 'terser',

assetsDir: '',

terserOptions: {

compress: {

// drop_console: true,

// drop_debugger: true,

},

},

},

server: {

port: 8088,

host: '0.0.0.0',

proxy: {

'/api': {

target: `https://${target}.fangxiaobao.net`,

changeOrigin: true,

},

}

}

})

}

注意

配置完成后，弹框组件的遮罩层可能会消失；因为el-overlay类名的样式内容被格式化了，所以只需要重写就行

.el-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000; height: 100%; background-color: var(--el-overlay-color-lighter); overflow: auto;}