@douyinfe/semi-vite-plugin

用于Semi Design自定义主题,替换前缀等的vite插件.

导言

该插件为带有Vite的"半设计"所设计,提供两个主要能力:

• 自定义主题
• 替换 CSS 选择器的前缀

注:插件通过软件包路径检测出半相关依赖性. 它支持两者 @douyinfe/semi-ui 和版本后缀软件包 @douyinfe/semi-ui-19 (亦为 semi-icons) (中文(简体) ).

使用量

安装

安装 @douyinfe/semi-vite-plugin 作为一种发展依赖:

npm install --save-dev @douyinfe/semi-vite-plugin
# or
yarn add --dev @douyinfe/semi-vite-plugin
# or
pnpm add -D @douyinfe/semi-vite-plugin

自定义主题

Semi Design使用Scs变量来取出上千个 Design Tokens. 您可以替换 通过此插件实现主题定制的这些符号 . 更多信息

您可以通过三种方式自定义主题:

• 由 Semi DSM 生成 npm 包
• 您工程中的本地 Scs 文件
• 将密钥值对参数传递到插件

优先从低到高.

通过 npm 软件包

完成定制后 半设计系统,半DSM 将生成 npm 软件包,然后像这样使用:

// vite.config.ts
import { defineConfig } from 'vite';
import semiTheming from '@douyinfe/semi-vite-plugin';

export default defineConfig({
    plugins: [
        semiTheming({
            theme: '@semi-bot/semi-theme-yours',
        }),
    ],
});

通过本地 Scs 文件

您可以检查您在 半网站。 。 。 .

步骤1: 添加本地文件

// local.scss
$font-size-small: 16px;

第2步: 配置 vite

// vite.config.ts
import path from 'path';
import { defineConfig } from 'vite';
import semiTheming from '@douyinfe/semi-vite-plugin';

export default defineConfig({
    plugins: [
        semiTheming({
            include: path.resolve(__dirname, 'local.scss'),
        }),
    ],
});

通过参数

// vite.config.ts
import { defineConfig } from 'vite';
import semiTheming from '@douyinfe/semi-vite-plugin';

export default defineConfig({
    plugins: [
        semiTheming({
            variables: {
                '$font-size-small': '16px',
            },
        }),
    ],
});

替换 CSS 选择器的前缀

Semi Design所使用的 CSS 选择器的前缀为 semi 默认 (例如:. .semi-button) (中文(简体) ). 您可以通过此插件替换前缀 :

// vite.config.ts
import { defineConfig } from 'vite';
import semiTheming from '@douyinfe/semi-vite-plugin';

export default defineConfig({
    plugins: [
        semiTheming({
            prefixCls: 'custom',
        }),
    ],
});

然后获得替换的CSS选择器(例如. .custom-button) (中文(简体) ).

用 CSS 层环绕输出样式

// vite.config.ts
import { defineConfig } from 'vite';
import semiTheming from '@douyinfe/semi-vite-plugin';

export default defineConfig({
    plugins: [
        semiTheming({
            cssLayer: true,
        }),
    ],
});

API 密码

半主题( 选项)

如何运作

1. CSS → SCSS 重写: 拦截请求 @douyinfe/semi-(ui|icons|foundation)/lib/**/*.css,将后缀切换为 .scss 并读取原始 Sass 源.
2. 主题注入: 插入主题 index.scss 编号 : global.scss 编号 : animation.scss 编号 : local.scss / 用户提供的变量和 include 文档,加 $prefix 和(可选) @layer semi { ... } 包装.
3. Sass 汇编: 用 sass.compileString,解决 ~package/... 按节点导入 原始树 .scss 文档.
4. 前缀补丁: 对于匹配的文件 @douyinfe/semi-*/.../env.js,重写 BASE_CLASS_PREFIX 常数到配置 prefixCls实现同样的目标 替换 Vite 的 dev-mode dep 预捆绑的工作 (.vite/deps页:1 esbuild 插件通过 optimizeDeps.esbuildOptions.plugins 改为 在预捆绑时间也重写嵌入模块.
5. 删除Cs: 发表可选评论 .css 半包内导入 他们没找到绑匪.

财务问题

为什么班名还保留下来 semi-* 内 vite dev? 吗?

虚拟预捆绑 node_modules 软件包输入 .vite/deps 使用建设 (或以Vite 8+为倒数. 何时 prefixCls 设置,此插件插入一个 新建重写相关插件 env.js 预捆绑内的文件. 如果你之前开始 vite 一次没有插件( 或者有不同的插件) prefixCls),你可能有一个 stale .vite/deps 缓存。 停止 dev 服务器 运行 rm -rf node_modules/.vite 迫使一个干净的再捆绑.

Vite 8 打印出一个关于 optimizeDeps.esbuildOptions

Vite 8 切换到 Rolldown 进行分解预拆, 现在更喜欢 optimizeDeps.rolldownOptions。该插件仍然使用 optimizeDeps.esbuildOptions 用于与 Vite 3 的广泛兼容性; 滚动 所以警告是无害的 并且前缀 重写仍然正确 .

相关

• 半设计
• @douyinfe/semi-webpack-plugin
• @douyinfe/semi-rspack-plugin