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"], // 自動(dòng)導(dǎo)入vue和vue-router相關(guān)函數(shù)
? ? ? ? dts: "src/auto-import.d.ts",// 生成 `auto-import.d.ts` 全局聲明
? ? ? }),
? ? ? Components({
? ? ? ? resolvers: ElementPlusResolver({
? ? ? ? ? importStyle: 'sass'
? ? ? ? })
? ? ? }),
? ? ? compressPlugin({
? ? ? ? deleteOriginFile: true,
? ? ? ? disable: true, ?// 禁用壓縮
? ? ? }),
? ? ? createSvgIconsPlugin({
? ? ? ? // 指定需要緩存的圖標(biāo)文件夾
? ? ? ? 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,
? ? ? ? },
? ? ? }
? ? }
? })
}
注意
配置完成后，彈框組件的遮罩層可能會(huì)消失；因?yàn)閑l-overlay類名的樣式內(nèi)容被格式化了，所以只需要重寫就行
.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;}
