Vue3+vite+element-plus+Sass修改主题颜
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;}
