# semi-foundation

## 项目简介

semi-foundation 是 Semi UI 组件库的基础样式与逻辑层，包含各类基础组件的样式（scss）与核心 TypeScript 逻辑。

---

## 构建方法

1. 安装依赖：
   ```bash
   pnpm install
   ```
2. 构建产物：
   ```bash
   pnpm build:lib
   ```

---

## 使用自定义主题包（如 @fx422/semi-theme-default）

你可以通过 npm 安装自定义主题包，并让所有组件样式自动引入该主题的 scss 入口文件。

### 步骤

1. 安装主题包：
   ```bash
   pnpm add @fx422/semi-theme-default -D
   ```

2. 修改 `gulpfile.js`，将 scss 变量导入路径改为 npm 包：
   ```js
   // const scssVarStr = `@import "../theme/scss/index.scss";\n`;
   const scssVarStr = `@import "@fx422/semi-theme-default/index.scss";\n`;
   ```
   > 注意：具体路径请根据你的主题包实际 scss 入口调整。

3. 重新构建：
   ```bash
   pnpm build:lib
   ```

---

## gulpfile.js 主题包配置说明

`gulpfile.js` 中通过如下代码自动为每个 scss 文件插入主题变量：

```js
.pipe(through2.obj(
    function (chunk, enc, cb) {
        const filePath = chunk.path.replace(/\\/g, '/');
        // 只对非 theme/scss/ 目录下的 scss 文件插入 import
        if (!filePath.includes('theme/scss/')) {
            const scssVarStr = `@import "@fx422/semi-theme-default/index.scss";\n`;
            let scssRaw = chunk.contents.toString('utf-8');
            if (scssRaw.startsWith("@use")) {
                const scssRawSplit = scssRaw.split("\n");
                const codeStartIndex = scssRawSplit.findIndex(item => !item.startsWith("@use"));
                scssRawSplit.splice(codeStartIndex, 0, scssVarStr);
                scssRaw = scssRawSplit.join("\n");
            } else {
                scssRaw = `${scssVarStr}\n${scssRaw}`;
            }
            chunk.contents = Buffer.from(scssRaw, 'utf-8');
        }
        cb(null, chunk);
    }
))
```

这样可以确保所有组件样式都自动引入你的自定义主题。

---

## 其他

如需更多帮助，请查阅源码或联系维护者。