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