Bug: unplugin-element-plus 自动导入无效

[chengazhen]

Version

Vben Admin V5

Describe the bug?

在使用 unplugin-element-plus 插件之后，无法自动导入 element 组件。

我看了 demo 里面也是手动导入了组件

相关issue element-plus/unplugin-element-plus#187

Reproduction

只要使用自动导入都不行

System Info

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 AMD Ryzen 7 8845H w/ Radeon 780M Graphics
    Memory: 10.35 GB / 27.81 GB
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.13.2 - C:\Program Files\nodejs\pnpm.CMD
    bun: 1.1.36 - ~\.bun\bin\bun.EXE
  Browsers:
    Edge: Chromium (130.0.2849.68)
    Internet Explorer: 11.0.22621.3527

Relevant log output

No response

Validations

• Read the docs
• Ensure the code is up to date. (Some issues have been fixed in the latest version)
• I have searched the existing issues and checked that my issue does not duplicate any existing issues.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[mynetfan]

unplugin-element-plus 不是用来自动导入组件的，而是自动导入组件的样式。
请查阅ElementPlus官方文档：https://element-plus.org/zh-CN/guide/quickstart.html#%E6%8C%89%E9%9C%80%E5%AF%BC%E5%85%A5

[chengazhen]

有个问题，为什么不使用 unplugin-vue-components 进行导入呢

[mynetfan]

不是所有的人都喜欢自动导入。这个不属于基础框架的范畴，如果有需要可以自己按照ElementPlus文档配置

[chengazhen]

我修改为自动导入，但是黑暗主题就不生效了，需要在main.ts 手动导入 css文件，但是使用 unplugin-element-plus 就不需要手动导入黑暗主题的css文件，想问一下项目是做了相关处理吗

[chengazhen]

当我使用 unplugin-vue-components 自动导入的时候。:root 选择器会被element plus 的覆盖导致切换主题不生效。是否考虑将 :root 修改为 body 吗？@mynetfan

function updateCSSVariables(
  variables: { [key: string]: string },
  id = '__vben-styles__',
): void {
  // 获取或创建内联样式表元素
  const styleElement =
    document.querySelector(`#${id}`) || document.createElement('style');

  styleElement.id = id;

  // 构建要更新的 CSS 变量的样式文本
  let cssText = ':root {';
  for (const key in variables) {
    if (Object.prototype.hasOwnProperty.call(variables, key)) {
      cssText += `${key}: ${variables[key]};`;
    }
  }
  cssText += '}';

  // 将样式文本赋值给内联样式表
  styleElement.textContent = cssText;

  // 将内联样式表添加到文档头部
  if (!document.querySelector(`#${id}`)) {
    setTimeout(() => {
      document.head.append(styleElement);
    });
  }
}

[surpriseSF]

请问您解决了吗？我要遇到了这个问题

[chengazhen]

请问您解决了吗？我要遇到了这个问题

自己配置一套