vue3+vite中使用自定义element-plus主题配置

自定义主题分为两种,一种是 全部导入 另一种是 按需导入 方式

全部导入方式

ps:默认已经安装跟在main.js中配置完毕

新建一个文件存放主题样式element.scss(路径为assets/scss/element.scss)

js 复制代码
// element.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with ( 
    $colors: ( 
        "primary": (
            "base": #7bb1f5,
        ),
    ),
);
// 这句记得要加
@use "element-plus/theme-chalk/src/index.scss" as *;

重点来了,需要在main.js中把引入的element-plus样式文件替换成自己写的

js 复制代码
// main.js
// 引入element-plus样式文件-------使用了自定义的主题样式这里就不能引入element-plus的样式文件否则不生效
// import 'element-plus/dist/index.css'  
import '@/assets/scss/element.scss'  

全部导入方式就搞定了。

按需导入方式

还是上面的那个element.scss文件

js 复制代码
// element.scss
@forward 'element-plus/theme-chalk/src/common/var.scss' with ( 
    $colors: ( 
        "primary": (
            "base": #7bb1f5,
        ),
    ),
);
// 这句要注释掉
// @use "element-plus/theme-chalk/src/index.scss" as *;

重点!!!!需要安装一个包 yarn add unplugin-element-plus --dev

js 复制代码
// vite.config.js
import { defineConfig } from 'vite'
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'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver({ importStyle: "sass" })], //这里记得需要添加一个配置
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: "sass" })], //这里记得需要添加一个配置
    }),
    // 按需定制主题配置
    ElementPlus({
        useSource: true,
    }),
  ],
  css: {
    preprocessorOptions: {
        scss: {
            additionalData: `
                @use "@/assets/scss/element.scss" as *;
                `,
            },
        },
    }
})

还有最后一点就是在main.js中把element-plus样式文件引入去掉

js 复制代码
// main.js
// 引入element-plus样式文件-------使用了自定义的主题样式这里就不能引入element-plus的样式文件否则不生效
// import 'element-plus/dist/index.css' 

ok了,这就是按需导入的方式。

相关推荐
岁月宁静8 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者9 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~9 小时前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge9 小时前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再9 小时前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴9 小时前
Lua 模块的完整入门指南
前端·lua
浪里行舟10 小时前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@12311 小时前
CSS易忘属性
前端·css
瓜瓜怪兽亚11 小时前
前端基础知识---Ajax
前端·javascript·ajax
AI智能研究院11 小时前
(四)从零学 React Props:数据传递 + 实战案例 + 避坑指南
前端·javascript·react.js