Vue3+vite+element-plus修改主题颜色
自定义element-plus主题色
·
怎么引入使用这边就不多说了
自定义element-plus主题色
1.在项目中安装sass
npm install sass
2.新建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),
)
);
3.vite.config.js
配置
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import * as path from 'path';
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import {createStyleImportPlugin, ElementPlusResolve } from 'vite-plugin-style-import';
// https://vitejs.dev/config/
export default defineConfig(({mode}) => {
const config = loadEnv(mode, './')
return {
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
"_C":path.resolve(__dirname,"src/components"),
"views": path.resolve(__dirname, "src/views")
}
},
css: {
preprocessorOptions: {
scss: {
// 自定义的主题色
additionalData: `@use "@/styles/element/index.scss" as *;`,
},
},
},
plugins: [
//配置自动导入element start
createStyleImportPlugin({
resolves: [ElementPlusResolve()],
libs: [
{
libraryName: 'element-plus',
esModule: true,
resolveStyle: (name: string) => {
return `element-plus/theme-chalk/${name}.css`
},
},
]
}),
//配置自动导入element end
vue(),
// 自动引入
AutoImport({
resolvers: [ElementPlusResolver({
// 自动引入修改主题色添加这一行,使用预处理样式,不添加将会导致使用ElMessage,ElNotification等组件时默认的主题色会覆盖自定义的主题色
importStyle: "sass",
})],
}),
Components({
resolvers: [ElementPlusResolver({
// 自动引入修改主题色添加这一行,使用预处理样式
importStyle: "sass",
})],
})
],
server: {
open: true,
proxy: {
'/api': {
target: config.VITE_BASE_URL,
changeOrigin: true,
rewrite: (path) => path.replace(/\/api/, '') //正则匹配替换
},
'/uploads': {
target: config.VITE_BASE_URL,
changeOrigin: true,
rewrite: (path) => path.replace(/\/uploads/, '') //正则匹配替换
}
},
hmr: true, // 热更新是否开启
},
build: {
assetsDir: './static/front/'
}
}
})
更多推荐
已为社区贡献2条内容
所有评论(0)