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了,这就是按需导入的方式。

相关推荐
Cache技术分享21 小时前
203. Java 异常 - Throwable 类及其子类
前端·后端
wingring21 小时前
Vue3 后台分页写腻了?我用 1 个 Hook 删掉 90% 重复代码
前端
LFly_ice21 小时前
学习React-20-useId
前端·学习·react.js
要加油哦~1 天前
刷题 | 牛客 - 前端面试手撕题 - 中等 - 1-2/20 知识点&解答
前端·面试
Async Cipher1 天前
JSON-LD 的格式
前端·javascript
LFly_ice1 天前
学习React-18-useCallBack
前端·学习·react.js
How_doyou_do1 天前
样式冲突修复组件
前端·javascript·html
IT_陈寒1 天前
SpringBoot实战:这5个高效开发技巧让我节省了50%编码时间!
前端·人工智能·后端
isixe1 天前
Uniapp IOS 和 Android 下的文件写入用户目录
前端·uni-app
蓝莓味的口香糖1 天前
【npm】npm命令大全
前端·npm·node.js