使用主题
如何在前端项目中应用 Semi DSM 中发布的主题
更新时间: 8/24/2022, 3:41:36 PM

如何消费主题

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

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'
  })
]

  1. 完成接入

在 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
});
  1. 手动引入主题 在 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 

字节跳动用户接入

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