1、创建common.less文件
我这里的路径是src/assets/less/common.less,这个可自己决定
:root {
--body-bg: #f4f4f4;
--color-brand: #060101;
--header-height: 48px; // 头部内容高度/一级、二级菜单title高度
--header-size: 16px;
--nav-collapse-height: 44px; // 导航 展开/收起 高度
--nav-transition-time: 0.2s; // 导航nav过渡时间
--nav-size: 16px;
--nav-border-width: 1px;
--nav-item-height: 44px;
--nav-item-icon-size: 20px;
--nav-hover-min-width: 128px; // 导航滑过最小宽度
--nav-hover-title-height: 56px;
--nav-hover-item-height: 36px;
// --nav-sub-title-height: 56px;
--nav-sub-item-height: 36px;
}
body {
background-color: var(--body-bg);
}
// 右侧容器
.right-content {
width: 100%;
}
// 颜色
.color--success {
color: var(--el-color-success);
}
.color--error {
color: var(--el-color-error);
}
.color--danger {
color: var(--el-color-danger) !important;
}
.color--info {
color: var(--el-color-info);
}
.color--primary {
color: var(--el-color-primary);
}
// 文件上传
.upload-wrapper {
.el-upload {
width: 100%;
height: 100%;
.el-upload-dragger {
width: 100%;
height: 100%;
padding: 0;
}
}
.el-icon.icon-plus {
width: 100%;
height: 100%;
text-align: center;
}
.el-loading-mask {
border: 1px dashed var(--el-border-color);
border-radius: 6px;
}
}
2、以下两种任选其一即可
1)在vite.config.js中添加以下代码
只看css即可
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
import { viteObfuscateFile } from 'vite-plugin-obfuscator'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
// 以下三项引入是为配置Element-plus自动按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig(
({ mode, command }: { mode: 'prod' | 'test' | 'dev'; command: 'build' | 'serve' }) => {
const isProd = mode === 'prod'
const isRun = command === 'serve'
console.log('isRun:', isRun)
return {
build: {
outDir: '../dist/end/end-' + mode,
minify: 'terser',
terserOptions: {
compress: {
drop_console: isProd,
drop_debugger: isProd,
},
},
},
plugins: [
vue(),
// 以下两项是为配置Element-plus自动按需导入
AutoImport({
resolvers: [ElementPlusResolver()],
}),
Components({
resolvers: [ElementPlusResolver()],
}),
// viteObfuscateFile 配置项参考:https://github.com/javascript-obfuscator/javascript-obfuscator#javascript-obfuscator-options
viteObfuscateFile({
stringArray: false, // 为 true 会导致element-plus样式丢失
}),
// svg
createSvgIconsPlugin({
iconDirs: [
resolve(__dirname, './src/assets/svg/common'),
resolve(__dirname, './src/assets/svg/nav'),
resolve(__dirname, './src/assets/svg/home'),
resolve(__dirname, './src/assets/svg/wisdom'),
],
symbolId: 'icon-[dir]-[name]',
}),
],
resolve: {
alias: [
{
find: '@',
replacement: resolve(__dirname, './src'),
},
{
find: '@/*',
replacement: resolve(__dirname, './src/*'),
},
{
find: '@common',
replacement: resolve(__dirname, '../common'),
},
{
find: '@common/*',
replacement: resolve(__dirname, '../common/*'),
},
],
},
server: {
port: 3000,
host: '0.0.0.0',
proxy: {
'/api': {
target: isProd ? 'https://xxxx.com' : 'http://test.xxxx.com',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '/api'),
},
},
},
// 定义less全局变量
css: {
preprocessorOptions: {
less: {
charset: false,
additionalData: `@import "${resolve(__dirname, 'src/assets/less/common.less')}";`,
},
},
},
}
},
)
2)在main.js中添加以下代码
import './src/assets/less/common.less'
3、现在就可以在全局使用自定义的主题色啦
.form-container {
background: var(--bg-light-1);
padding: 20px 12px 0;
overflow: hidden;
}