open-index/open-npm huggingface dataset:
npm package: @shiyishiwoa/elementui-theme
Description: 基于 SCSS 的 Element UI 皮肤扩展包。旨在解决微前端（qiankun）架构下，主系统与子系统之间自定义颜色按钮（Button）和标签（Tag）的样式同步问题。
Author: shiyishiwoa
Latest version: 1.0.4

基于 SCSS 的 Element UI 皮肤扩展包。旨在解决微前端（qiankun）架构下，主系统与子系统之间自定义颜色按钮（Button）和标签（Tag）的样式同步问题。

🚀 特性
一键扩展：通过修改颜色地块（Map）即可自动生成所有 UI 状态。

多模式支持：完美适配 Element UI 的 Plain、Dark、Text 等属性。

微前端友好：子系统独立运行时自动编译，集成到主系统时视觉完全一致。

自动化编译：基于 SCSS mix() 函数自动计算 Hover、Active 及禁用状态颜色。

📦 安装
在主系统或子系统中执行：

Bash
npm install @shiyishiwoa/elementui-theme --save
🛠 配置 (重要)
为了确保子系统独立运行正常，请在构建工具中配置全局注入。

Vue CLI (vue.config.js)
JavaScript
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        // 注入 SCSS 变量与生成逻辑
        additionalData: `@import "~@shiyishiwoa/elementui-theme/scss/index.scss";`
      }
    }
  }
}
Vite (vite.config.js)
JavaScript
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@shiyishiwoa/elementui-theme/scss/index.scss";`
      }
    }
  }
});
🎨 使用指南
目前支持的自定义类型：purple, orange, pink, cyan。

Button 按钮
HTML
<el-button type="purple">紫色按钮</el-button>

<el-button type="orange" plain>橙色朴素</el-button>

<el-button type="text" class="color-pink">粉色文字</el-button>
Tag 标签
HTML
<el-tag type="purple">紫色标签</el-tag>

<el-tag type="cyan" effect="dark">青色深色</el-tag>

<el-tag type="orange" effect="plain">橙色朴素</el-tag>
🔄 开发与维护
修改样式：在 scss/_variables.scss 中添加新颜色。

更新版本：npm version patch (自动生成 Git Tag)。

发布：npm publish。

同步：应用端执行 npm update @shiyishiwoa/elementui-theme。