# @douyinfe/semi-webpack-plugin 中文文档

规范地址：https://npmcn.com/package/%40douyinfe/semi-webpack-plugin/

版本：2\.105\.0
npm 元数据更新时间：2026-11-12T09:39:22.965Z
中文译文更新时间：2026-11-12T21:50:06.101Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40douyinfe/semi-webpack-plugin
原文对照：https://npmcn.com/package/%40douyinfe/semi-webpack-plugin/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：65.6 kB，36 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：11 个
- peer 依赖：webpack ^5\.77\.0
- 首次发布：2021-10-25T14:51:23.693Z
- 最新版本发布：2026-11-12T09:39:20.994Z
- 近 30 天下载量：4494（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：590（近 12 个月 67 个）

## 中文简介

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

## 安装

```sh
npm install @douyinfe/semi-webpack-plugin
```

也可以使用：`pnpm add @douyinfe/semi-webpack-plugin`、`yarn add @douyinfe/semi-webpack-plugin`、`bun add @douyinfe/semi-webpack-plugin`

## README

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

## 导言

该插件为半设计设计,支持webpack4和webpack5设计,提供两个主要能力:

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

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

## 使用量

### 安装

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

```shell
npm install --save-dev @douyinfe/semi-webpack-plugin
# or
yarn add --dev @douyinfe/semi-webpack-plugin
```

### 自定义主题

Semi Design使用Scs变量来取出上千个 Design Tokens. 您可以通过此插件替换 Token 实现主题定制 . [更多信息](https://semi.design/dsm/)

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

-   自定义主题的 npm 软件包
-   您工程中的本地 Scs 文件
-   将密钥值对参数传递到插件 优先从低到高.

#### 通过 npm 软件包

要使用 npm 软件包, 您需要自定义主题通过 [半设计系统](https://semi.design/dsm/).完成定制后,Semi DSM将为您生成 npm 软件包,然后您可以像这样使用.

```js
// webpack.config.js
const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;

module.exports = {
    // ...
    plugins: [
        new SemiPlugin({
            theme: '@douyinfe/semi-theme-default'
        })
    ]
    // ...
};
```

#### 通过本地 Scs 文件

您可以检查您在 [半网点](https://semi.design/en-US/basic/tokens)。 。 。 .

-   step: 添加本地文件

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

```

-   step2: 配置网络包

```js
// webpack.config.js
const path = require('path');
const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;

module.exports = {
    // ...
    plugins: [
        new SemiPlugin({
            include: path.join(__dirname, 'local.scss')
        })
    ]
};
```

#### 通过参数

```js
// webpack.config.js
const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;

module.exports = {
    // ...
    plugins: [
        new SemiPlugin({
            variables: {
                "$font-size-small": '16px'
            }
        })
    ]
};
```

### 替换 CSS 选择器的前缀

Semi Design使用的 CSS 选择器默认前缀为半( 例如, ), `.semi-button`。 您可以通过此插件替换前缀 .

```js
// webpack.config.js
const SemiPlugin = require('@douyinfe/semi-webpack-plugin').default;

module.exports = {
    // ...
    plugins: [
        new SemiPlugin({
            prefixCls: 'custom'
        })
    ]
    // ...
};
```

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

## 阿庇语Name

### 新建 simiPlugin( 选项)

#### 选项。前缀Cls

类型 : `String`

CSS选择器的前缀.

#### 选项。 主题

类型 : `String` 或者说 `Object`

当类型是字符串时,它代表自定义主题npm的名称. 你用得着 [半设计系统](https://semi.design/) 改为自定义主题.

##### 选项。主题。name

性能与类型相同 `options.theme` 是字符串.

##### 选项。包含

类型 : `String`

本地 Scs 文件的绝对路径 .

##### 选项。变量

类型 : `Object`

Scs 代号的密钥值对.

##### 选项.omitCss

类型 : `Boolean`

在汇编阶段,是否排除 css 引用. 用于解决Next.js不支持在第三方代码中全面引入cs的问题. 看这个 [讨论情况](https://github.com/vercel/next.js/discussions/27953)。 。 。 .

##### 选项。webpack Context。 普通模块

类型 : `webpack NormalModule`

##### 选项

类型 : `String`

取出cs的网包加载器的路径.

##### 选项

类型 : `Object`

取出cs的网包加载器的选项.

#### 选项

类型 : `(loaderList:any[])=>any[]`

您可以通过使用此选项覆盖加载器来自定义 Webpack 如何处理半相关样式 。 该函数将接收默认加载器列表( 包括选项. extractCss Options), 您应该返回新的加载器列表 。 最佳的做法只是将您的加载器添加到列表中,而不是删除或更改默认加载器,因为里面有一些核心逻辑.

在 Webpack@ 5 中, 需要通过 api 获取一些钩子 `NormalModule.getCompilationHooks`。但在某些情况下,网页包不会安装,例如Next.js。 因此,用户需要在"NormalModule"中作为参数通过.

## 常见问题

### @douyinfe/semi-webpack-plugin 是什么？

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

### 如何安装 @douyinfe/semi-webpack-plugin？

在项目目录运行 npm install @douyinfe/semi-webpack-plugin，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：webpack（^5\.77\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @douyinfe/semi-webpack-plugin 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/douyinfe\_\_semi-webpack-plugin 是否存在。

### @douyinfe/semi-webpack-plugin 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @douyinfe/semi-webpack-plugin 可以商用吗？

@douyinfe/semi-webpack-plugin 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @douyinfe/semi-webpack-plugin 的下载量有多少？

根据 npm 官方下载统计，@douyinfe/semi-webpack-plugin 在 2026/10/13 – 2026/11/11 这 30 天内被下载 4,494 次，日均约 150 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @douyinfe/semi-webpack-plugin 还在维护吗？

最新版本 2\.105\.0 发布于 2026/11/12（1 天前）；至今共发布 590 个版本，其中过去 12 个月发布了 67 个；首次发布于 2021/10/25。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。