关于二次封装 element-plus 组件库主题问题

没看懂
"按照 element-plus 官网主题配置就行",官网都写着啊。
能够覆盖组件库的主题? 改变量啊。

@lyxxxh2 组件库按官网那样配置了一套主题，打包后生成的变量已经写死了，使用方使用组件，并且也配置了一套 element-plus 的主题，加载顺序要早，覆盖不了组件库的主题

@staceycomcn111
https://element-plus-admin.cn/#/dashboard/analysis

你可以看下他怎么实现的。
我抄过他的动态路由,代码还挺不错的。

没看懂

也可以直接覆盖 css variables

@lyxxxh2 好

@lyxxxh2 我实现了！！！ 我太激动了

packages/components/theme/var.scss

$hl-color-primary: #ffe240 !default; // 保持纯 Sass 变量

packages/components/theme/variables.scss


@use './var' as *;

// 正确写法：直接使用 Sass 变量，并在根部导出 CSS 变量
// 这个文件用于生成最终的主题 :root{}

:root {
--hl-color-primary: #{$hl-color-primary}; // 将 Sass 变量值同步到 CSS 变量
}


然后组件库的 scss 使用 变量$hl-color-primary
packages/components/theme/hl-base-button.scss

@use "./var.scss" as *;

.my-button {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;

&--default {
background-color: #f0f0f0;
}

&--primary {
background-color: $hl-color-primary;
color: white;
}

&--success {
background-color: #67c23a;
color: white;
}

&--warning {
background-color: #e6a23c;
color: white;
}

&--danger {
background-color: #f56c6c;
color: white;
}
}


组件库主题就设置好了


用户使用主题时，默认使用的是组件库的主题，也可以替换组件库主题

用户替换主题代码
play/src/styles/hl/index.scss
@use 'hl-fe-component/theme/var.scss' with (
$hl-color-primary: pink
);

vite.confit.ts
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "~/styles/hl/index.scss" as vars;`,
},
},
},

然后 大工告成