本站消息

站长简介/公众号

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2024-11(6)

element-plus 自动引入修改主题色

发布于2022-03-12 20:14     阅读(2109)     评论(0)     点赞(8)     收藏(3)


 vue3出来了,想尝鲜首先想到的依然是element。

一上来就遇到如何自定义主题色的问题。

element-plus官网给了两个示例,完整引入的和手动引入的,唯独缺了自动引入的。

整了好些天才整出来一个解决方法供大家参考,避免踩坑。

安装依赖

  1. # sass
  2. npm install -D sass
  3. # element-plus官方文档中自动引入所需的两个依赖
  4. npm install -D unplugin-vue-components unplugin-auto-import

 打包工具

我使用的是vite,此处依然是以vite配置为例

开始

第一步、照着element-plus官网给的方法配置自动引入

附上官网地址  element-plus按需导入官网示例

  1. // vite.config.ts
  2. import AutoImport from 'unplugin-auto-import/vite'
  3. import Components from 'unplugin-vue-components/vite'
  4. import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
  5. export default {
  6. plugins: [
  7. // ...
  8. AutoImport({
  9. resolvers: [ElementPlusResolver()],
  10. }),
  11. Components({
  12. resolvers: [ElementPlusResolver()],
  13. }),
  14. ],
  15. }

第二步、配置自定义主题 

依然附上官网地址  element-plus修改主题色官网示例

增加了一个预处理样式的配置,以及导入时读取预处理配置

  1. // vite.config.js
  2. import path from "path";
  3. import {
  4. defineConfig
  5. } from 'vite'
  6. import vue from '@vitejs/plugin-vue'
  7. // 自动引入
  8. import AutoImport from 'unplugin-auto-import/vite'
  9. import Components from 'unplugin-vue-components/vite'
  10. import {
  11. ElementPlusResolver
  12. } from 'unplugin-vue-components/resolvers'
  13. // https://vitejs.dev/config/
  14. export default defineConfig({
  15. resolve: {
  16. alias: {
  17. // 配置资源路径
  18. "@/": `${path.resolve(__dirname, "src")}/`,
  19. },
  20. },
  21. css: {
  22. preprocessorOptions: {
  23. scss: {
  24. // 自定义的主题色
  25. additionalData: `@use "@/styles/element/index.scss" as *;`,
  26. },
  27. },
  28. },
  29. plugins: [
  30. vue(),
  31. // 自动引入
  32. AutoImport({
  33. resolvers: [ElementPlusResolver({
  34. // 自动引入修改主题色添加这一行,使用预处理样式,不添加将会导致使用ElMessage,ElNotification等组件时默认的主题色会覆盖自定义的主题色
  35. importStyle: "sass",
  36. })],
  37. }),
  38. Components({
  39. resolvers: [ElementPlusResolver({
  40. // 自动引入修改主题色添加这一行,使用预处理样式
  41. importStyle: "sass",
  42. })],
  43. })
  44. ],
  45. });

 附上我的样式:

  1. // @/styles/element/index.scss
  2. @forward "element-plus/theme-chalk/src/common/var.scss" with (
  3. $colors: (
  4. "primary": (
  5. "base": #3F9A12,
  6. ),
  7. "success": (
  8. "base": #67C23A,
  9. ),
  10. "warning": (
  11. "base": #E6A23C,
  12. ),
  13. "danger": (
  14. "base": #F56C6C,
  15. ),
  16. "error": (
  17. "base": #F56C6C,
  18. ),
  19. "info": (
  20. "base": #909399,
  21. ),
  22. ),
  23. $button-padding-horizontal: (
  24. "default": 80px
  25. )
  26. );

直接看结果

我的项目:v3-plus: vue3.x + element-plus项目,使用vite (gitee.com)

在线演示:我的项目 




所属网站分类: 技术文章 > 博客

作者:92wwhehjw

链接:http://www.qianduanheidong.com/blog/article/316880/cf83b98776acf6a1ccb0/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

8 0
收藏该文
已收藏

评论内容:(最多支持255个字符)