首页 前端知识 Vue3项目中Element Plus主题色定制(通过scss变量替换方案)

Vue3项目中Element Plus主题色定制(通过scss变量替换方案)

2024-07-22 00:07:56 前端知识 前端哥 550 107 我要收藏

Element Plus官方解释:
https://element-plus.org/zh-CN/guide/theming.html#通过-scss-变量

如果通过scss变量替换方案来定制Element Plus主题色,按照如下步骤:

  • 安装sass:使用命令npm install sass -D
  • 准备定制样式文件:在项目下面新增文件styles/element/index.scss
  • 对Element Plus样式进行覆盖:通知Element Plus采用scss语言,再导入定制的scss文件覆盖

安装sass

执行npm i sass -D
在这里插入图片描述

准备定制化的样式文件

在项目styles目录下面创建一个目录element,然后在element目录下面新建一个index.scss文件:
在这里插入图片描述

index.scss文件的内容:

/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ( // 主色
            'base': #27ba9b,
        ),
        'success': ( // 成功色
            'base': #1dc779,
        ),
        'warning': ( // 警告色
            'base': #ffb302,
        ),
        'danger': ( // 危险色
            'base': #e26237,
        ),
        'error': ( // 错误色
            'base': #cf4444,
        ),
    ))

自动导入配置

配置Element Plus采用saas配色系统

将vite.config.js文件中的Components修改为如下形式:

   Components({
      resolvers: [
        // 配置Element Plus采用saas样式配色系统
        ElementPlusResolver({ importStyle: 'sass' }),
      ],
    })

自动导入定制化样式文件进行样式覆盖

将下面这段代码放入vite.config.js文件中:

  css: {
    preprocessorOptions: {
      scss: {
        // 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      }
    }
  }

修改后的vite.config.js文件为:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// Element Plus按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        // 配置Element Plus采用saas样式配色系统
        ElementPlusResolver({ importStyle: 'sass' }),
      ],
    }),
  ],
  resolve: {
    // 实际的路径转换 将@ 转换为./src
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      }
    }
  }
})

修改配置后,执行npm run dev重启,primary按钮的主题色修改为绿色了:
在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14157.html
标签
vue3
评论
发布的文章

TEGG学习总结

2024-08-07 00:08:45

ajax笔记二

2024-03-12 01:03:25

jQuery 密码验证

2024-08-07 00:08:10

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!