Fix: Next / Remix adaptation #2754
Conversation
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 77227f5:
|
| variables?: { [key: string]: string | number }; | ||
| include?: string | ||
| } | ||
|
|
There was a problem hiding this comment.
SemiThemeOptions 的类型定义很奇怪？和上面的 SemiVitePluginOptions 基本重合了，但是在下面的逻辑中，并没有从 theme 中去取用这些参数
|
|
||
|
|
||
|
|
||
| export default function semiVitePlugin(options: SemiVitePluginOptions = {}) { |
There was a problem hiding this comment.
如果 export 的是default ，那么在使用文档中就不应该用 import {xxx} 的方式，需要修改下 README.md
| t.assignmentExpression( | ||
| '=', | ||
| t.identifier('lottie'), | ||
| t.awaitExpression( |
There was a problem hiding this comment.
异步导入，可能会导致使用的时候，lottie 还没有存在
There was a problem hiding this comment.
用项目测试了下，应为不存在所以导致 Lottie 没有渲染
| prefixCls: 'custom' | ||
| }) | ||
| ] | ||
| }; |
There was a problem hiding this comment.
vite 插件中并没有做到替换 prefixCls， prefixCls 的处理分为以下两个部分：
- 和scss 文件中的 prefix 前缀相关
packages/semi-theme-default/scss/variables.scss - 和 tsx 中的样式类名前缀相关
packages/semi-foundation/base/constants.ts
packages/semi-icons/src/env.ts
目前的插件逻辑，没有做这些地方的处理，因此 prefixCls 并不会生效。
如果暂时不打算处理，则删除下和 prefixCls 相关的说明
| - 完成配置，可以正常使用 Semi 相关组件 | ||
|
|
||
| **如何在 Remix 中使用主题包** | ||
| 可以直接将 cssBundleHref 这一步替换为引入主题包中已构建好的全量css 产物，代替默认主题css），例如当希望应用抖音创作服务平台的主题包 `@semi-bot/semi-theme-doucreator` 时 | ||
| - 首先安装插件 npm i vite-plugin-semi (如果你使用 yarn 或 pnpm，请自行更换为对等命令) |
| ]; | ||
| }; | ||
| /* vite.config.ts */ | ||
| + import semi from "vite-plugin-semi-theme"; |
There was a problem hiding this comment.
这里的导入是否需要修改为新增加的vite 插件？
| + href: ThemeStyle, | ||
| }, | ||
| ]; | ||
| ``` |
There was a problem hiding this comment.
如果已经通过插件处理了，为啥这里有需要引入全量的 css，semi.min.css ？
中文模板 / Chinese Template
What kind of change does this PR introduce? (check at least one)
PR description
修复Semi在Next/Remix v2的兼容性问题
新增Vite插件
Changelog
🇨🇳 Chinese
🇺🇸 English
Checklist
Other
Additional information