element plus 主题色替换

之前的解决方案是从node_modules中的element plus拷贝出对应scss样式来，但是有同学指出，方案有问题。个人也觉得拷贝出来是在增加代码量。这两天参考了网上的写法以及其他作者的博客，重新总结了一套方法，方案如下。

一、准备

1、本次使用的是Vite来搭建项目，所以还有使用cli来构建的本方法不适应。建议换成vite来构建。

2、package.json安装如下依赖到devDependencies，这里注意要使用的npm指令

"unplugin-auto-import": "^0.5.11",
"unplugin-vue-components": "^0.19.3",

3、css预处理器使用scss

二、实现步骤

（1）主题定义

// index.scss$--colors: ("primary": ("base": #00a063,),"success": ("base": #21ba7f,),"warning": ("base": #f2711c,),"danger": ("base": #db2828,),"error": ("base": #db2828,),"info": ("base": #42b8dd,),
);// You should use them in scss, because we calculate it by sass.
// comment next lines to use default color
@forward "element-plus/theme-chalk/src/common/var.scss" with(// do not use same name, it will override.$colors: $--colors,$button-padding-horizontal: ("default": 50px));// if you want to import all
// @use "element-plus/theme-chalk/src/index.scss" as *;// You can comment it to hide debug info.
// @debug $--colors;

(2)在Vite.config.ts中进行配置和引入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import AutoImport from 'unplugin-auto-import/vite'
import path from 'path'export default ({ mode }) => {return defineConfig({// 路径别名定义resolve: {alias: {'@': path.resolve(__dirname, 'src'),'components': path.resolve(__dirname, 'src/components'),'views': path.resolve(__dirname, 'src/views')}},// css全局处理css: {preprocessorOptions: {scss: {// 这里路径自己改，找到自己定义的scss文件additionalData: `@use "@/assets/css/index.scss" as *;`,}}},plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver({importStyle: "sass",})],}),Components({// allow auto load markdown components under `./src/components/`extensions: ['vue', 'md'],// allow auto import and register components used in markdowninclude: [/\.vue$/, /\.vue\?vue/, /\.md$/],resolvers: [ElementPlusResolver({importStyle: 'sass',}),],dts: 'src/components.d.ts',})],// vue-tsc --noEmit --skipLibCheck用来开启ts打包校验build: {assetsDir: './static',chunkSizeWarningLimit: 500,minify: 'terser',terserOptions: {compress: {// warnings: false,drop_console: true,  //打包时删除consoledrop_debugger: true, //打包时删除 debuggerpure_funcs: ['console.log'],},output: {// 去掉注释内容comments: true,},},},server: {host: '0.0.0.0',port: 8000,cors: true,proxy}})
}

三、注意

这里一定要注意！一定要注意！一定要注意！当时我就是在这里卡住了，一直纳闷为什么引入错误。

如果你的element plus一开这样引入了，一定都去掉。因为饿了吗的源码里存在!important以及merge这种权重和样式合并类代码，自然把自定义都覆盖了。所以请去掉。

element plus 主题色替换相关推荐

element-ui 整体替换主题色
自定义主题 Element 默认提供一套主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式.我们提供了三种方法,可以进行不同程度的样式自定义. ¶仅替换主题色如果仅希望更换 Element ...
node-sass改dart-sass and 一些七七八八，实现sass主题色修改
sass相关七七八八 dart-sass sass SCSS变量 css变量 SCSS数据类型 !default 插值语句条件语句 @if @for循环 @each循环 @while循环 @impo ...
Vue - 超详细 Element 组件库主题颜色进行 “统一全局“ 替换，将默认的蓝色主题色更换为其他自定义颜色（保姆级教程，简易且标准全局替换主题色）
前言网上的文章可以用乱七八糟来形容了,各种奇葩的引入.安装各种东西,本文提供简洁且符合官方标准的解决方案. Element UI 默认主题色是蓝色,很可能与我们设计稿不一致(比如设计稿是绿色主题), ...
Element UI 改变主题色
文章目录前言第一种方法 1.安装scss包 2.新建一个样式文件引入第二种方法所以我们可以结合第一种和第二种情况推荐使用前言用于实现不同功能的系统往往需要独特的主题色,本文用于更改el ...
在vue项目中引入element，并改变主题色
写项目提高开发效率是最重要的,引入UI框架就是提高开发效率的有效途径. 这里就说一下自己是如何引入UI框架的--vue中引入elementUI.(项目其实早已经开发完了,只是回过头来回顾一下自己当时是 ...
使用 css/less 动态更换主题色（换肤功能）
前言说起换肤功能,前端应该是非常熟悉了? 一般来说换肤的需求分为几种: 1. 纯前端,直接在页面前端通过点击自由切换限定的几种主题色,切换之后主题色变量存到本地浏览器 2. 在后台配置好色值,传到前 ...
element-plus 更换主题色
element-plus 更换主题色场景: 简单的定制主题色,并不需要有按钮切换主题色. 实现: 在项目中新建你的theme.scss,代码如下: // style/element/index.sc ...
vue中element自定义主题
仅替换主题色单纯的只是想换个主题颜色请参考ElementUI官网的自定义主题. 链接: https://element.eleme.cn/#/zh-CN/component/custom-theme ...
动态更换主题色（换肤功能）
文章目录对于可供选择的颜色/主题样式换肤的实现一个全局class控制样式切换 JS改变href属性值切换样式表,例如 HTML 的 rel 属性下的 alternate 实现: 对于制定动态色值换 ...

element plus 主题色替换

element plus 主题色替换相关推荐

最新文章

热门文章