semi-foundation

项目简介

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

构建方法

1. 安装依赖：

   pnpm install

2. 构建产物：

   pnpm build:lib

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

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

步骤

1. 安装主题包：

   pnpm add @fx422/semi-theme-default -D

2. 修改 gulpfile.js，将 scss 变量导入路径改为 npm 包：

   // const scssVarStr = `@import "../theme/scss/index.scss";\n`;
   const scssVarStr = `@import "@fx422/semi-theme-default/index.scss";\n`;

   注意：具体路径请根据你的主题包实际 scss 入口调整。

3. 重新构建：

   pnpm build:lib

gulpfile.js 主题包配置说明

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

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

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

其他

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