vue3.2 vite typescript element-plus自定义主题颜色，全局修改组件样式

vite.config.ts

……

export default defineConfig(({ command}) => {
  return {
    resolve: {
      alias: {
        "@": resolve(__dirname, "src")
      },
      extensions: [".js", ".json", ".ts"], // 导入时想要省略的后缀名，.vue等自定义文件不建议省略，影响IDE识别和提示
    },
    
    // 修改element主题色
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/assets/css/elementplus.scss" as *;`,
        },
      },
    },
    
    plugins: [
      ……
    ],
  };
});

src/assets/css/elementplus.scss

文件名称和目录，这个可以自定义，和上面vite配置对上就行。

• 全局主题色，变量从node_modules，element-plus/theme-chalk/src/common/var.scss这个里边找
• 组件样式覆盖，变量从chrome调试工具里边找，var()包裹的，按照那个来

@use "sass:map";
//全局主题色
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #005BAD,
    ),
    'success': (
      'base': #00A85A,
    ),
    'warning': (
      'base': #F6AD55,
    ),
    'danger': (
      'base': #DC3C3A,
    ),
  )
);
//修改组件样式变量
:root{
  --el-box-shadow-light:0px 0px 8px 0px rgba(0,91,173,0.22);
  
  .el-card{
    --el-card-border-radius:8px;
  }
  .el-table{
    --el-table-header-bg-color:#0E6EB8;
    --el-table-header-text-color:#FFFFFF;
  }
}