如何消费主题

当你完成主题包的发布之后，就可以在前端项目中进行主题包的接入消费了

Figma 端消费主题，请查阅 Figma插件 章节

1. 安装主题

首先你需要在前端项目中安装你刚刚发布的主题包，例如，当主题包名为 @semi-bot/semi-theme-nyx-c 时

npm i @semi-bot/semi-theme-nyx-c  # yarn、pnpm同理

2. 接入Plugin

Semi 支持多种不同类型的前端项目接入

在 Webpack 项目接入

1. 首先安装 Semi 提供的 Webpack Plugin
2. 修改 webpack.config.js, 在 plugins 配置项中，增加 SemiWebpackPlugin ，指定 theme

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

plugins: [
  new SemiWebpackPlugin({
    theme: '@semi-bot/semi-theme-nyx-c',
    include: '~@semi-bot/semi-theme-nyx-c/scss/local.scss'
  })
]

3. 完成接入

在 Vite 项目接入

1. 首先安装 Semi Vite Pluign: vite-plugin-semi-theme （感谢社区开发者 @boenfu 贡献）
2. 在 vite.config.js 中 配置 主题

import { defineConfig } from "vite";
import SemiPlugin from "vite-plugin-semi-theme";

export default defineConfig({
  plugins: [
    SemiPlugin({
      theme: "@semi-bot/semi-theme-nyx-c"
    }),
  ],
});

在 NextJs 项目接入

• 当你在 Next.js 项目中使用 Semi 时，需要搭配 Semi 提供的编译插件（由于 Next.js 不允许 npm 包从 node_modules 中 import 样式文件，需要配合插件将默认的import CSS 语句移除，并且手动引入 CSS）

1. 配置 Semi Next Plugin

// next.config.js
const semi = require('@douyinfe/semi-next').default({
    /* the extension options */
});
module.exports = semi({
    // your custom Next.js configuration
});

2. 手动引入主题 在 global.css 中引入全量的 semi css

/* styles/globals.css */
@import '~@douyinfe/semi-ui/dist/css/semi.min.css'; // 当你希望使用 Semi 默认主题时，直接从 semi-ui 中引即可

@import '~xxx/semi.min.css'   // 当你希望使用 DSM 自定义主题 xxx时, 从对应主题包中引即可

@import '~@semi-bot/semi-theme-nyx-c/semi.min.css'; // 例如DSM 自定义主题 @semi-bot/semi-theme-nyx-c 

字节跳动用户接入

如果你是字节跳动用户，正在使用公司内部相关的构建工具，请查阅飞书文档