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 markdown
        include: [/\.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,  //打包时删除console
          drop_debugger: true, //打包时删除 debugger
          pure_funcs: ['console.log'],
        },
        output: {
          // 去掉注释内容
          comments: true,
        },
      },
    },
    server: {
      host: '0.0.0.0',
      port: 8000,
      cors: true,
      proxy
    }
  })
}

三、注意

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

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