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;}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！