refactor: 打包组件不同主题的 css 文件 #3189
Conversation
## Walkthrough
本次更新对 CSS 构建流程进行了增强，新增了多主题支持。通过在 `buildAllCSS` 和 `buildCSS` 函数中引入可选的 `themeName` 参数，脚本能够针对不同主题（如默认主题和 "jmapp"、"jrkf" 主题）分别构建主题样式。构建过程中，变量文件、样式路径、输出目录及生成的 JS/CSS 文件均根据主题动态调整。构建脚本会分别为每个主题执行构建流程，并输出主题化的样式资源和入口文件。
## Changes
| 文件/路径 | 变更摘要 |
|------------------------------------------------|------------------------------------------------------------------|
| scripts/build-taro.mjs<br>scripts/build.mjs | - `buildAllCSS` 和 `buildCSS` 函数签名增加可选 `themeName` 参数<br>- 构建流程根据 `themeName` 动态调整变量、路径和输出文件名<br>- 增加对 "jmapp" 和 "jrkf" 主题的构建调用<br>- 生成的 JS 和 CSS 文件按主题输出，导入路径相应调整<br>- 注释补充，部分辅助函数位置调整 |
| packages/nutui-templates/create-app-demo/craco.config.js | - 新增 webpack 配置支持 `.scss` 和 `.sass` 文件处理，自动注入全局变量文件<br>- Babel 插件配置修改，使用 `customName` 和 `customStyleName` 动态解析组件及样式路径 |
| packages/nutui-templates/create-app-demo/package.json | - ESLint 配置中移除 `extends` 数组 |
| packages/nutui-templates/create-app-demo/src/App.js | - 添加默认主题 CSS 引入，注释保留其他主题样式导入 |
| packages/nutui-templates/vite-demo/package.json | - 升级开发依赖，切换 React 插件为 `@vitejs/plugin-react-swc`，更新 TypeScript 和 Vite 版本，新增 `sass-embedded` |
| packages/nutui-templates/vite-demo/src/App.tsx | - 添加默认主题 CSS 引入，注释保留其他主题样式导入 |
| packages/nutui-templates/vite-demo/vite.config.ts | - 切换 React 插件为 `@vitejs/plugin-react-swc`<br>- 修改 `vite-plugin-imp` 配置，调整样式导入路径并添加 SCSS 预处理选项，注入全局变量文件 |
| src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md<br>src/sites/sites-react/doc/docs/react/official-theme-react.md | - 主题名称由“京东 JDesign 主题”改为“京东 B 端主题”<br>- 删除本地项目 vite/webpack sass-loader 配置示例部分 |
| src/sites/sites-react/doc/docs/react/start-react.en-US.md<br>src/sites/sites-react/doc/docs/react/start-react.md | - 扩展多主题 CSS/SCSS 导入示例，覆盖默认、暗黑、B 端、JRKF 主题<br>- 增加自动按需加载配置示例，更新 Babel 插件配置支持 SCSS<br>- 更新示例代码仓库分支链接 |
| src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md<br>src/sites/sites-react/doc/docs/taro/official-theme-react.md | - 主题名称由“京东 JDesign 主题”改为“京东 B 端主题” |
| src/sites/sites-react/doc/docs/taro/start-react.en-US.md<br>src/sites/sites-react/doc/docs/taro/start-react.md | - 扩展多主题样式导入示例（CSS 和 SCSS）<br>- 更新 Babel 插件配置，改用 `@nutui/nutui-react`，支持 `customStyleName` 自动加载 SCSS 样式<br>- 新增 Taro 配置示例，支持 Sass 变量全局导入和多主题切换 |
| package.json | - 扩展 `sideEffects` 配置，新增支持 `style-jmapp` 和 `style-jrkf` 等多主题样式及字体资源路径 |
| src/styles/variables-jrkf.scss | - 新增大量 SCSS 变量，涵盖按钮、侧边栏、分段控件、价格显示、开关、弹窗、评分、对话框、徽章、网格、加载动画等多个组件和样式细节，丰富主题设计选项 |
## Sequence Diagram(s)
```mermaid
sequenceDiagram
participant BuildScript as 构建脚本
participant ThemeCSS as buildAllCSS(themeName)
participant CompCSS as buildCSS(themeName)
participant Output as 输出目录
BuildScript->>ThemeCSS: 调用 buildAllCSS('') 和 buildAllCSS('jmapp')、buildAllCSS('jrkf')
ThemeCSS->>CompCSS: 遍历组件，调用 buildCSS(themeName)
CompCSS->>Output: 生成主题相关的 CSS/JS 文件
ThemeCSS->>Output: 输出主题总样式 bundlePossibly related PRs
Suggested reviewers
Poem
|
github-actions
bot
added
action:review
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feat_v3.x #3189 +/- ##
=============================================
- Coverage 86.60% 86.52% -0.09%
=============================================
Files 289 289
Lines 18742 18719 -23
Branches 2821 2817 -4
=============================================
- Hits 16232 16197 -35
- Misses 2505 2517 +12
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🔭 Outside diff range comments (3)
scripts/build-taro.mjs (1)
247-289: 💡 Verification agent❓ Verification inconclusive
建议添加异常处理与可重用模块，以增强多主题构建的稳定性与复用性。
在此函数
buildAllCSS中，构建逻辑大多与buildCSS类似，且重复出现于不同脚本文件（如build.mjs中）。若出现 SCSS 或路径缺失，将直接抛出异常，建议在读取或写文件前增加异常捕获，以避免中断整个构建流程。此外，可考虑将多主题构建的公共逻辑抽离到单独的工具函数，以减少重复代码、提升可维护性。请确认各个主题的变量文件都已正确命名并实际存在，避免出现无法找到对应主题 SCSS 文件的报错。
请修改异常处理和复用逻辑
目前在文件
scripts/build-taro.mjs的buildAllCSS函数中：
- 缺少对 SCSS 文件的读取或写入过程中潜在异常的捕获，可能会因变量文件、路径错误或 SCSS 缺失直接中断整个构建流程。
- 与
buildCSS中重复的构建逻辑建议抽离到单独的工具函数中，提高多主题构建的稳定性和可维护性。建议如下：
- 在读取文件和写入输出文件前加入异常捕获（例如使用 try-catch），并在捕获异常时记录相关日志，保证异常不会导致整个构建过程失败；
- 将多主题构建用到的公共逻辑（如变量文件导入、样式文件生成等）抽离为独立模块或工具函数，避免代码重复；
- 请手动确认各个主题的 SCSS 变量文件（如
./styles/variables.scss和./styles/variables-{theme}.scss）命名正确且实际存在，以防一直报对应 SCSS 文件缺失的错误。scripts/build.mjs (2)
196-238: 🛠️ Refactor suggestion在函数
buildAllCSS中集中处理主题时，建议提取公共逻辑与加强文件检查。此函数与
scripts/build-taro.mjs中的buildAllCSS逻辑基本一致，出现较多重复代码及相同行为。为减少维护成本，建议提取一个通用多主题构建函数至单一共享模块。并在扫描 SCSS 文件时增加文件存在性验证或异常处理，避免运行时因某个必需主题文件缺失而导致构建终止。
295-381: 🛠️ Refactor suggestion在函数
buildCSS中添加错误日志与模块化的考虑。
- 若 SASS 编译失败，将直接中断并报错，建议在此处捕获异常并打印更清晰的错误说明。
- 针对多主题编译过程以及 Harmony CSS 的拷贝逻辑（如 countup 特例）与
scripts/build-taro.mjs也存在重复，建议再次思考抽取公共方法以统一管理，避免多处重复。
🧹 Nitpick comments (8)
scripts/build-taro.mjs (4)
499-501: 可考虑在常规构建与多主题构建之间共享明显的输出信息。此处开始执行默认主题的构建，但仅简单输出 "Build CSS"。若项目增多，构建可读性应进一步提升，例如：区分“默认主题”与其他主题的构建流程日志，让开发者在阅读构建日志时更易定位问题。
504-505: 在构建 jmapp 主题时可增加注释或日志以明确主题特性。与默认主题相比，这里构建了名为 "jmapp" 的主题，但缺乏对该主题额外说明或依赖提示，建议增加合适的注释以便后续维护者快速了解其差异化配置。
509-509: 在此处与后续多主题构建函数统一命名或输出更精细的日志信息。建议在
buildAllCSS()处与buildAllCSS('jmapp')处提供一致且更详细的日志，便于从控制台区分是针对默认主题还是特定主题。
512-513: 与buildAllCSS()相同的建议：使用更具可读性的日志。当前日志仅为
Build All jmapp CSS，可额外标注是否包含了哪些文件、输出到哪个目录等信息，帮助后续调试与维护。scripts/build.mjs (4)
240-284: 建议对buildThemeCSS的输入文件做更多校验，并在无匹配时采取提示或降级处理。由于多主题场景下有可能出现“某主题”未配置或文件遗漏等情况，当前逻辑仅根据
projectID判断并简单跳过。建议在此函数中增加日志或警告，以便在构建时及时提醒开发者某些主题文件缺失，从而避免发布后出现样式错误。
441-443: 日志命名需与后续相同流程保持一致性。此处执行 Build CSS，但后面又会分别执行 “Build jmapp CSS”、“Build All CSS” 等流程。建议使用更易区分或更详细的日志名称，以便在查看 CI 输出或本地调试时清晰了解当前流程执行了哪一步。
445-447: 在配置构建日志时保持与其他多主题输出的关键词一致。此处的日志与上方 “Build CSS” 仅在主题名上不同，若项目后续需增加更多主题，建议统一采用如 "Build CSS" 的格式，便于快速检索及排查多主题构建问题。
453-455: 区分“Build All CSS”与“Build All jmapp CSS”时可输出更详细的文件列表或目录路径。如果后续主题增多，只输出“Build All jmapp CSS”可能不足以显示整体情况，建议在此时打印出对应主题文件数量或目标输出路径，帮助团队快速定位构建结果。
| // 构建样式 | ||
| async function buildCSS(p) { | ||
| const cssFiles = await glob(['src/packages/**/*.scss'], { | ||
| async function buildCSS(themeName = '') { | ||
| const componentScssFiles = await glob(['src/packages/**/*.scss'], { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
在 Sass 编译过程中添加错误处理日志。
当前仅调用 sass.compileString 进行编译，一旦出现语法错误或找不到依赖，将会直接报错并中断构建，难以及时追踪问题所在。建议在此处捕获异常并输出日志或警告信息，以便追溯问题。
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (6)
src/sites/sites-react/doc/docs/react/official-theme-react.md (1)
12-12: 主题命名更新为"京东 B 端主题"主题名称从"京东 JDesign 主题"调整为"京东 B 端主题"，保持了文档一致性。
Markdown 中的代码段
`variables-jmapp.scss`内部有多余空格，建议移除以符合 Markdown 规范。-| 京东 B 端主题 ([预览](https://nutui.jd.com/h5/react/jdesign-3x/#/zh-CN/component/button)) | `variables-jmapp.scss` | +| 京东 B 端主题 ([预览](https://nutui.jd.com/h5/react/jdesign-3x/#/zh-CN/component/button)) | `variables-jmapp.scss` |src/sites/sites-react/doc/docs/react/start-react.md (1)
31-36: 增加多主题导入选项说明为全量样式导入添加了默认主题、B 端主题和 JRKF 主题的选项，使开发者能够清晰了解不同主题的导入方式。
不过，第 31 行的描述"JRKF 默认"可能会令用户产生混淆，因为它引入的是
style.css而不是带有主题后缀的文件。建议修改为"默认主题"以保持一致性。src/sites/sites-react/doc/docs/taro/start-react.md (1)
113-120: 增加 Taro 项目多主题导入选项为 Taro 项目全量引入样式文件添加了多个主题选项：
- 默认主题
- 默认主题暗黑模式
- B 端主题
- JRKF 主题
注意，第 119 行有一个拼写错误：
JKRF应该是JRKF。-// JKRF 主题 +// JRKF 主题src/sites/sites-react/doc/docs/taro/start-react.en-US.md (3)
108-113: 主题样式导入选项优化文档现在提供了多种主题样式的导入选项，包括默认主题、B端(jmapp)和JRKF主题。这种方式让用户可以根据需求选择合适的主题样式。
不过，由于所有导入语句都是被注释的，建议在文档中明确说明用户需要取消注释自己需要的主题样式导入语句。
123-142: 丰富的主题文件路径说明文档现在分别提供了CSS和SCSS两种格式的主题文件路径，并且包含了默认主题、暗黑主题、B端主题和JRKF主题的选项，内容非常完整。
建议添加一句说明，提示用户只需要选择一种主题进行导入，避免多主题同时导入可能造成的样式冲突。
185-207: Babel配置更新配置已更新为使用
@nutui/nutui-react作为库名和customStyleName函数来指定SCSS样式导入路径，这与主题化支持的变更保持一致。注意到在202行有一个被注释的CSS样式路径配置选项，但与实际使用的SCSS路径似乎没有明显区别。建议明确说明这两种配置的区别，或者如果它们指向相同的路径，可以移除其中一个以避免混淆。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (14)
packages/nutui-templates/create-app-demo/craco.config.js(1 hunks)packages/nutui-templates/create-app-demo/package.json(0 hunks)packages/nutui-templates/create-app-demo/src/App.js(1 hunks)packages/nutui-templates/vite-demo/package.json(1 hunks)packages/nutui-templates/vite-demo/src/App.tsx(1 hunks)packages/nutui-templates/vite-demo/vite.config.ts(2 hunks)src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md(2 hunks)src/sites/sites-react/doc/docs/react/official-theme-react.md(2 hunks)src/sites/sites-react/doc/docs/react/start-react.en-US.md(7 hunks)src/sites/sites-react/doc/docs/react/start-react.md(7 hunks)src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md(2 hunks)src/sites/sites-react/doc/docs/taro/official-theme-react.md(2 hunks)src/sites/sites-react/doc/docs/taro/start-react.en-US.md(3 hunks)src/sites/sites-react/doc/docs/taro/start-react.md(3 hunks)
💤 Files with no reviewable changes (1)
- packages/nutui-templates/create-app-demo/package.json
✅ Files skipped from review due to trivial changes (3)
- src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md
- src/sites/sites-react/doc/docs/taro/official-theme-react.md
- packages/nutui-templates/vite-demo/src/App.tsx
🧰 Additional context used
🪛 LanguageTool
src/sites/sites-react/doc/docs/react/start-react.en-US.md
[style] ~100-~100: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ... vite-plugin-imp -D The entry file needs to import global styles. :::demo js /...
(REP_NEED_TO_VB)
[style] ~205-~205: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...el-plugin-import -D The entry file needs to import global styles. :::demo js /...
(REP_NEED_TO_VB)
🪛 markdownlint-cli2 (0.17.2)
src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md
12-12: Spaces inside code span elements
null
(MD038, no-space-in-code)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build
- GitHub Check: test
🔇 Additional comments (29)
packages/nutui-templates/create-app-demo/src/App.js (1)
2-4: 引入主题CSS文件以支持多主题切换代码变更通过导入默认主题CSS文件并添加其他主题的注释导入，为组件提供了多主题支持。这种方式使开发者可以通过简单地切换注释来轻松更改应用的主题样式。
src/sites/sites-react/doc/docs/react/official-theme-react.md (1)
23-23: 主题CSS文件表格中更新了主题名称将CSS文件表格中的主题名称也更新为"京东 B 端主题"，保持文档一致性。
src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md (1)
22-22: CSS文件表格中更新了主题名称将CSS文件表格中的主题名称也更新为"JD B client Theme"，保持文档一致性。
packages/nutui-templates/vite-demo/package.json (1)
23-23: 从 @vitejs/plugin-react 切换到 @vitejs/plugin-react-swc更新为使用基于SWC的React插件，这可以提供更快的编译速度。
packages/nutui-templates/vite-demo/vite.config.ts (4)
3-3: 升级到 @vitejs/plugin-react-swc从
@vitejs/plugin-react升级到@vitejs/plugin-react-swc，使用 SWC 替代 Babel 作为转译器，可以显著提升构建速度。这是一个良好的性能优化。
14-16: 样式引入路径调整以支持多主题路径从
dist/esm/${name}/style/css更新为dist/es/packages/${name.toLowerCase()}/style/index，并添加了 jmapp 主题的注释选项。这符合多主题支持的目标，允许开发者根据需要切换不同主题。
20-22: 插件配置语法优化增加了适当的逗号和括号，提高了配置的可读性和维护性。
24-33: 添加 SCSS 预处理器配置支持多主题变量新增 css 配置部分，为 SCSS 预处理器指定了选项：
- 设置 Sass 编译器 API 为 "modern-compiler"
- 通过 additionalData 注入全局 SCSS 变量
- 提供了 jmapp 主题的注释选项
这些配置对于支持多主题系统非常重要，使开发者能够轻松切换主题。
src/sites/sites-react/doc/docs/react/start-react.en-US.md (8)
31-36: 增加多主题导入选项说明为全量样式导入添加了默认主题、B 端主题和 JRKF 主题的选项，使开发者能够清晰了解不同主题的导入方式。
61-79: 完善主题文件路径选项为手动按需加载场景提供了完整的 CSS 和 SCSS 主题文件路径选项，包括：
- 默认主题
- 默认暗黑主题
- B 端主题
- JRKF 主题
这使开发者能够根据项目需求选择适合的主题文件路径。
100-129: 添加入口文件全局样式导入说明为自动按需加载模式新增了入口文件全局样式导入的示例代码，提供了所有主题选项的注释，方便开发者根据需求选择适当的主题。
🧰 Tools
🪛 LanguageTool
[style] ~100-~100: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ... vite-plugin-imp -DThe entry file needs to import global styles. :::demojs /...(REP_NEED_TO_VB)
147-164: 更新 Vite 配置示例支持多主题扩展了 Vite 配置示例，添加了针对不同主题的样式导入路径选项：
- 默认主题
- B 端主题
- JRKF 主题
每个主题都提供了 CSS 和 SCSS 两种导入方式，增强了配置的灵活性。
171-183: 添加 SCSS 预处理器配置新增 SCSS 预处理器配置部分，支持通过 additionalData 导入全局主题变量，并提供了 B 端主题和 JRKF 主题的变量导入选项。这对于使用 SCSS 的项目非常有帮助。
205-231: 入口文件需要引入全局样式的说明添加了 Webpack 项目入口文件需要引入全局样式的示例代码，提供了所有主题选项的注释，方便开发者根据需求选择合适的主题。
🧰 Tools
🪛 LanguageTool
[style] ~205-~205: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...el-plugin-import -DThe entry file needs to import global styles. :::demojs /...(REP_NEED_TO_VB)
283-287: 更新 Babel 插件配置支持 SCSS修改了 Babel plugin-import 配置，引入
customStyleName函数来自动加载 SCSS 样式文件，同时保留了加载 CSS 样式文件的注释选项。这种配置方式更加灵活，支持不同的样式导入需求。
317-317: 更新示例代码仓库链接更新了示例代码仓库的分支链接指向
feat_v3.0，确保开发者能够访问到最新的示例代码。src/sites/sites-react/doc/docs/react/start-react.md (7)
58-80: 完善主题文件路径选项并优化描述文本为手动按需加载场景提供了完整的 CSS 和 SCSS 主题文件路径选项，并调整了描述文本，明确说明根据实际项目采用的技术栈进行选择。
提供的主题选项包括：
- 默认主题
- 默认暗黑主题
- B 端主题
- JRKF 主题
这使开发者能够根据项目需求选择适合的主题文件路径。
100-129: 添加入口文件全局样式导入说明为自动按需加载模式新增了入口文件全局样式导入的示例代码，提供了所有主题选项的注释，方便开发者根据需求选择适当的主题。
147-164: 更新 Vite 配置示例支持多主题扩展了 Vite 配置示例，添加了针对不同主题的样式导入路径选项：
- 默认主题
- B 端主题
- JRKF 主题
每个主题都提供了 CSS 和 SCSS 两种导入方式，增强了配置的灵活性。
171-183: 添加 SCSS 预处理器配置新增 SCSS 预处理器配置部分，支持通过 additionalData 导入全局主题变量，并提供了 B 端主题和 JRKF 主题的变量导入选项。这对于使用 SCSS 的项目非常有帮助。
205-231: 添加 Webpack 配置示例新增了 Webpack 配置示例，展示如何配置 sass-loader 以支持全局变量导入，并提供了不同主题的变量路径选项。这对于使用 Webpack 构建的项目非常有用。
283-287: 更新 Babel 插件配置支持 SCSS修改了 Babel plugin-import 配置，引入
customStyleName函数来自动加载 SCSS 样式文件，同时保留了加载 CSS 样式文件的注释选项。这种配置方式更加灵活，支持不同的样式导入需求。
317-317: 更新示例代码仓库链接更新了示例代码仓库的分支链接指向
feat_v3.0，确保开发者能够访问到最新的示例代码。src/sites/sites-react/doc/docs/taro/start-react.md (4)
128-147: 完善 Taro 项目主题文件路径选项为 Taro 项目手动按需加载场景提供了完整的 CSS 和 SCSS 主题文件路径选项，包括：
- 默认主题
- 默认暗黑主题
- B 端主题
- JRKF 主题
这使开发者能够根据 Taro 项目需求选择适合的主题文件路径。
160-189: 添加 Taro 项目入口文件全局样式导入说明为 Taro 项目新增了入口文件全局样式导入的示例代码，提供了所有主题选项的注释，方便开发者根据需求选择适当的主题。
202-214: 更新 Taro 项目 Babel 插件配置对 Taro 项目的 Babel 配置进行了更新：
- 修改
libraryName为@nutui/nutui-react- 添加
customStyleName函数自动加载 SCSS 样式文件- 提供 CSS 样式文件加载的注释选项
- 更新插件名称为
nutui-react这些变更使配置更加灵活，支持不同的样式加载需求。
219-231: 添加 Taro 项目 SCSS 配置说明新增了针对使用 SCSS 的 Taro 项目的配置说明，展示如何在 config/index 中配置 sass.data 选项以导入全局主题变量：
- 默认主题变量
- B 端主题变量
- JRKF 主题变量
这对于使用 SCSS 构建 Taro 项目的开发者非常有帮助。
src/sites/sites-react/doc/docs/taro/start-react.en-US.md (1)
210-222: 新增Taro Sass配置示例新增的Taro配置示例展示了如何通过
sass.data全局导入Sass变量文件，这对于主题定制非常有用。文档中清晰地注释了不同主题的变量文件选项，便于用户根据需要选择合适的主题。这是一个很好的补充，使主题配置更加完整。
packages/nutui-templates/create-app-demo/craco.config.js (1)
2-24: 新增Webpack SCSS处理配置添加了对.scss和.sass文件的处理规则，使用style-loader、css-loader和sass-loader进行处理，并通过additionalData选项自动导入NutUI的变量文件。
这个配置支持了不同主题的变量文件导入，包括默认主题、JDesign主题和JRKF主题，与文档中描述的主题支持保持一致。这是一个很好的改进，使得主题切换更加便捷。
| | --- | --- | | ||
| | Jingdong APP 10.0 theme (default) | `variables.scss` | | ||
| | Jingdong JDesign Theme | `variables-jdb.scss ` | | ||
| | Jingdong B client Theme | `variables-jdb.scss ` | |
There was a problem hiding this comment.
英文文档中的主题名称已更新为"Jingdong B client Theme"
主题名称从"Jingdong JDesign Theme"调整为"Jingdong B client Theme"，保持多语言文档一致性。
英文文档中的变量文件名称 variables-jdb.scss 与中文文档中的 variables-jmapp.scss 不一致，这可能会导致开发者混淆。建议统一使用相同的文件名称：
-| Jingdong B client Theme | `variables-jdb.scss ` |
+| Jingdong B client Theme | `variables-jmapp.scss` |📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| | Jingdong B client Theme | `variables-jdb.scss ` | | |
| | Jingdong B client Theme | `variables-jmapp.scss` | |
🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
12-12: Spaces inside code span elements
null
(MD038, no-space-in-code)
| "sass-embedded": "^1.86.3", | ||
| "typescript": "~5.6.2", | ||
| "vite": "^6.0.5", |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
更新和添加依赖以支持多主题构建
添加了sass-embedded依赖并更新了TypeScript和Vite版本，以支持多主题CSS文件的构建和处理。这些更新对于实现主题变量的预处理和动态样式路径解析非常必要。
请确认这些依赖版本是否与项目中的其他模块兼容，特别是升级到Vite 6可能需要确保所有插件都支持新版本。
🏁 Script executed:
#!/bin/bash
# 检查项目中Vite相关的依赖版本
npm ls | grep viteLength of output: 10386
请更新 Vite 相关插件以支持 Vite 6 版本
在 packages/nutui-templates/vite-demo/package.json 中已将 Vite 升级至 ^6.0.5，但通过 npm ls | grep vite 验证发现项目实际安装的 Vite 版本仍为 5.4.11，并且存在多项未满足依赖，可能导致构建失败或插件不兼容：
- @vitejs/plugin-react@^4.2.1
- @vitest/coverage-v8@^2.0.4
- @vitest/ui@^2.0.4
- vite-plugin-dts@4.2.1
- vitest-canvas-mock@^0.3.3
请针对以下几点进行修正：
- 同步升级上述插件至支持 Vite 6 的最新版本；
- 或者回退 Vite 版本至与现有插件兼容的范围（如
^5.x）； - 最后重新验证
npm ls | grep vite，确保无 UNMET DEPENDENCY 报错。
| 'import', | ||
| { | ||
| "libraryName": "@nutui/nutui-react", | ||
| "libraryDirectory": "dist/esm", | ||
| "style": "css", | ||
| "camel2DashComponentName": false | ||
| libraryName: '@nutui/nutui-react', | ||
| camel2DashComponentName: false, | ||
| customName: (name, file) => { | ||
| return `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}` | ||
| }, | ||
| // 自动加载 scss 样式文件 | ||
| customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style` | ||
| // 自动加载 css 样式文件 | ||
| // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style` | ||
| }, | ||
| "nutui-react" | ||
| ] | ||
| 'nutui-react', | ||
| ], |
There was a problem hiding this comment.
🛠️ Refactor suggestion
更新Babel插件配置
babel-plugin-import配置已更新，使用动态的customName和customStyleName函数来解析组件路径和样式路径，支持按需加载组件样式。
但在38-39行中，注释表示是"自动加载css样式文件"，而实际路径与36行的SCSS路径相同，这可能会造成混淆。建议修正这个注释或路径，确保CSS样式文件的正确路径。
- // 自动加载 css 样式文件
- // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style`
+ // 自动加载 css 样式文件
+ // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style/css`📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| 'import', | |
| { | |
| "libraryName": "@nutui/nutui-react", | |
| "libraryDirectory": "dist/esm", | |
| "style": "css", | |
| "camel2DashComponentName": false | |
| libraryName: '@nutui/nutui-react', | |
| camel2DashComponentName: false, | |
| customName: (name, file) => { | |
| return `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}` | |
| }, | |
| // 自动加载 scss 样式文件 | |
| customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style` | |
| // 自动加载 css 样式文件 | |
| // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style` | |
| }, | |
| "nutui-react" | |
| ] | |
| 'nutui-react', | |
| ], | |
| 'import', | |
| { | |
| libraryName: '@nutui/nutui-react', | |
| camel2DashComponentName: false, | |
| customName: (name, file) => { | |
| return `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}` | |
| }, | |
| // 自动加载 scss 样式文件 | |
| customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style` | |
| // 自动加载 css 样式文件 | |
| // customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style/css` | |
| }, | |
| 'nutui-react', | |
| ], |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
scripts/build.mjs (2)
199-213: 使用 path.posix 确保生成的 @import 路径在跨平台环境下一致
relativePath('/' + file, \/${dist}/${themeStylePath}.scss`)直接拼接斜杠在 Windows 环境会得到混合路径分隔符（C:.../release/...），可能导致 Sass 无法正确解析。可以考虑在调用前使用path.posix` 或对返回结果统一替换为正斜杠，提升跨平台稳定性。
296-380: 批量构建组件样式可并发执行以缩短总体构建时间
当前对每个组件的 SCSS 文件顺序await处理，项目组件数量多时 I/O 与编译耗时会线性增长。可以改用Promise.all或p-map控制并发，加快整体构建速度，同时保持资源占用可控。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
scripts/build-taro.mjs(8 hunks)scripts/build.mjs(8 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- scripts/build-taro.mjs
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (1)
scripts/build.mjs (1)
344-349: 路径替换规则可能破坏深层级 @import 相对路径
replaceAll('../../../../', '../../')假设所有需要上跳 4 层，但当组件层级变化时会出现替换不足或过度替换的问题，进而导致 Sass 找不到依赖文件。建议改用基于path.relative的动态计算，或在 PostCSS 阶段调整from与to来让 Sass 自动解析正确路径，避免硬编码层级数量。
| const variables = await readFile( | ||
| join(__dirname, '../src/styles/variables.scss'), | ||
| join(__dirname, `../src/styles/variables${themeName ? `-${themeName}` : ''}.scss`), | ||
| ) | ||
| for (const file of cssFiles) { | ||
| const button = await readFile(join(__dirname, '../', file), { | ||
| for (const file of componentScssFiles) { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
为主题变量文件缺失场景添加容错逻辑
当传入自定义主题名时，脚本直接读取
src/styles/variables-${themeName}.scss。如果该文件不存在，readFile 会抛出异常并终止整个构建流程。建议使用 try/catch 包装并在缺失时回退到默认变量文件或给出更友好的错误提示。
-const variables = await readFile(
- join(__dirname, `../src/styles/variables${themeName ? \`-\${themeName}\` : ''}.scss`),
-)
+let variables = ''
+try {
+ variables = await readFile(
+ join(__dirname, `../src/styles/variables${themeName ? \`-\${themeName}\` : ''}.scss`),
+ )
+} catch (_) {
+ if (themeName) {
+ console.warn(`[nutui] 未找到主题 ${themeName} 专属变量文件，回退到默认 variables.scss`)
+ variables = await readFile(
+ join(__dirname, '../src/styles/variables.scss'),
+ )
+ } else {
+ throw _
+ }
+}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const variables = await readFile( | |
| join(__dirname, '../src/styles/variables.scss'), | |
| join(__dirname, `../src/styles/variables${themeName ? `-${themeName}` : ''}.scss`), | |
| ) | |
| for (const file of cssFiles) { | |
| const button = await readFile(join(__dirname, '../', file), { | |
| for (const file of componentScssFiles) { | |
| let variables = '' | |
| try { | |
| variables = await readFile( | |
| join(__dirname, `../src/styles/variables${themeName ? `-${themeName}` : ''}.scss`), | |
| ) | |
| } catch (_) { | |
| if (themeName) { | |
| console.warn(`[nutui] 未找到主题 ${themeName} 专属变量文件，回退到默认 variables.scss`) | |
| variables = await readFile( | |
| join(__dirname, '../src/styles/variables.scss'), | |
| ) | |
| } else { | |
| throw _ | |
| } | |
| } | |
| for (const file of componentScssFiles) { |
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
src/sites/sites-react/doc/docs/react/start-react.en-US.md (3)
61-79: 修正拼写错误：Drak → Dark
“Default Drak theme” 存在拼写错误，应统一为 “Default Dark theme”。
请应用以下 diff 修正：@@ -63,7 +63,7 @@ // css theme file path // Default theme import '@nutui/nutui-react/dist/styles/themes/default.css' -// Default Drak theme +// Default Dark theme import '@nutui/nutui-react/dist/styles/themes/default-dark.css' // B client Theme import '@nutui/nutui-react/dist/styles/themes/jmapp.css' @@ -73,7 +73,7 @@ // scss theme file path // Default theme import '@nutui/nutui-react/dist/styles/theme-default.scss' -// Default Drak theme +// Default Dark theme import '@nutui/nutui-react/dist/styles/theme-dark.scss' // B client Theme import '@nutui/nutui-react/dist/styles/theme-jmapp.scss'
100-126: 修正拼写错误：Drak → Dark（自动按需加载示例）
在 Method 3 的示例代码中，同样存在 “Default Drak theme” 拼写问题，请统一修正为 “Default Dark theme”：@@ -109,7 +109,7 @@ // CSS theme file path // Default theme import '@nutui/nutui-react/dist/styles/themes/default.css' -// Default Drak theme +// Default Dark theme // import '@nutui/nutui-react/dist/styles/themes/default-dark.css' // B client Theme // import '@nutui/nutui-react/dist/styles/themes/jmapp.css' @@ -119,7 +119,7 @@ // scss theme file path // Default theme // import '@nutui/nutui-react/dist/styles/theme-default.scss' -// Default Drak theme +// Default Dark theme // import '@nutui/nutui-react/dist/styles/theme-dark.scss' // B client Theme // import '@nutui/nutui-react/dist/styles/theme-jmapp.scss'🧰 Tools
🪛 LanguageTool
[style] ~100-~100: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ... vite-plugin-imp -DThe entry file needs to import global styles. :::demojs /...(REP_NEED_TO_VB)
205-207: 优化提示多样性，避免重复表述
“ The entry file needs to import global styles.” 在多个示例中重复出现，可考虑更具体或更具指导性的描述以增强可读性。🧰 Tools
🪛 LanguageTool
[style] ~205-~205: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...el-plugin-import -DThe entry file needs to import global styles. :::demojs /...(REP_NEED_TO_VB)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/sites/sites-react/doc/docs/react/start-react.en-US.md(7 hunks)src/sites/sites-react/doc/docs/react/start-react.md(7 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/sites/sites-react/doc/docs/react/start-react.md
🧰 Additional context used
🪛 LanguageTool
src/sites/sites-react/doc/docs/react/start-react.en-US.md
[style] ~100-~100: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ... vite-plugin-imp -D The entry file needs to import global styles. :::demo js /...
(REP_NEED_TO_VB)
[style] ~205-~205: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...el-plugin-import -D The entry file needs to import global styles. :::demo js /...
(REP_NEED_TO_VB)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: test
🔇 Additional comments (1)
src/sites/sites-react/doc/docs/react/start-react.en-US.md (1)
31-36: 确认全量引入示例的主题路径
此处展示了默认和可选主题的全量样式引入方式，逻辑清晰且易于理解。
| // Default theme | ||
| // Handling on-demand import of CSS files, choose one of the two methods | ||
| return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css` | ||
| // Handling on-demand import of SCSS files, choose one of the two methods | ||
| return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style` | ||
|
|
There was a problem hiding this comment.
修复 Vite 配置中的重复 return 导致的不可达代码
在 vite.config.js 的 style 回调中同时存在两个 return，后续代码将不可达。建议保留一种方案并删除另一条。
@@ -146,7 +146,7 @@
style: (name) => {
- // Default theme
- return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css`
- // Handling on-demand import of SCSS files, choose one of the two methods
- return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style`
+ // Default theme：按需加载 CSS
+ return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css`
// 如果需要 SCSS，请切换为：
// return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style`
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| // Default theme | |
| // Handling on-demand import of CSS files, choose one of the two methods | |
| return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css` | |
| // Handling on-demand import of SCSS files, choose one of the two methods | |
| return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style` | |
| style: (name) => { | |
| // Default theme：按需加载 CSS | |
| return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style/css` | |
| // 如果需要 SCSS，请切换为： | |
| // return `@nutui/nutui-react/dist/es/packages/${name.toLowerCase()}/style` | |
| }, |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
src/styles/variables-jrkf.scss (1)
1843-1850: 缺少!default：Badge 轮廓变量
$badge-dot-border、$badge-outline-border等新变量未加上!default，建议统一为：$badge-dot-border: var(--nutui-badge-dot-border, 1px solid $color-primary-text) !default; $badge-outline-border: var(--nutui-badge-outline-border, 1px solid $color-primary) !default;以便用户在外部覆盖。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/styles/variables-jrkf.scss(19 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build
- GitHub Check: test
🔇 Additional comments (14)
src/styles/variables-jrkf.scss (14)
22-26: 新增主色图标态色变量，一致性良好
新增$color-primary-icon与$color-primary-icon-disabled对应主色图标正常/禁用态，命名及使用方式与其他主色变量保持一致。
88-88: 新增全局边框禁用态色
$color-border-disabled已正确添加，符合项目中其他边框颜色变量的模式。
135-135: 新增超小间距变量
$spacing-xxxs添加合理，可以支持更细粒度的布局需求。
241-244: 新增按钮超大圆角半径
$button-xlarge-border-radius定义清晰，与组件需求一致。
250-253: 新增按钮超大图标文本间距
$button-xlarge-text-icon-margin已正确添加，语义明确。
519-546: 新增侧边栏 (sidebar) 主题变量
一系列$sidebar-…变量已补充完整，支持不同主题下的侧边栏样式定制，命名与注释清晰。
547-577: 新增分段控件 (segmented) 主题变量
所有$segmented-…变量齐全，并且注释清晰，可满足多主题下的分段控件样式需求。
940-945: 新增超大号价格样式变量
$price-symbol-xlarge-size与$price-integer-xlarge-size等新变量定义合理，支持更大字号的价格展示。
958-961: 新增大号价格样式变量
$price-symbol-large-size、$price-integer-large-size、$price-decimal-large-size添加正确，与其他等级价格变量一致。
962-976: 新增基础价格色彩及间距变量
核心价格相关变量（颜色、线条色、默认间距）合理补充，命名与全局规范吻合。
989-997: 新增常规价格字号变量
$price-symbol-normal-size、$price-integer-normal-size、$price-decimal-normal-size均以!default声明，符合文件风格。
2335-2340: 新增栅格(grid) 边框与圆角
$grid-border-width与$grid-item-border-radius定义恰当，支持多主题下的栅格组件定制。
2627-2630: 新增加载动画背景变量
$loading-lottie-background补充合理，可覆盖 Lottie 加载背景，符合项目需求。
1014-1041: 新增开关组件(switch)多处主题变量
s$switch-…系列变量覆盖了非激活、禁用、文本尺寸、阴影等状态，命名与注释均清晰，支持多主题适配需求。Also applies to: 1066-1102
| $color-primary-specialdisabled: var( | ||
| --nutui-color-primary-specialdisabled, | ||
| #ffadbe | ||
| ) !default; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
命名一致性：specialdisabled 建议拆分
变量 $color-primary-specialdisabled 缺少中划线分隔，建议改为 $color-primary-special-disabled 以保持与其他变量一致的可读性。
| $color-primary-disabled-special: var( | ||
| --nutui-color-primary-disabled-special, | ||
| #ffadbe | ||
| ) !default; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
命名冲突风险：主色禁用态特殊变量
新增 $color-primary-disabled-special 与后续 $color-primary-specialdisabled 命名过于相似，容易混淆。建议统一变量命名风格，采用一致的中划线或驼峰格式，并明确区分“special”和“disabled”两个语义段。
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
scripts/build.mjs (1)
300-302:⚠️ Potential issue变量文件缺失时依旧会导致构建中断
上一轮 Review 已提示这里需要对
variables-${themeName}.scss缺失场景做降级处理，但目前仍是直接readFile，当外部只提供默认主题时脚本会直接抛错，整个构建流程被终止。请参考过往建议用try/catch回退到默认变量文件并输出 warn 日志。-const variables = await readFile( - join(__dirname, `../src/styles/variables${themeName ? `-${themeName}` : ''}.scss`), -) +let variables = '' +try { + variables = await readFile( + join(__dirname, `../src/styles/variables${themeName ? `-${themeName}` : ''}.scss`), + ) +} catch (_) { + if (themeName) { + console.warn(`[nutui] 未找到主题 ${themeName} 专属变量文件，回退到默认 variables.scss`) + variables = await readFile( + join(__dirname, '../src/styles/variables.scss'), + ) + } else { + throw _ + } +}
🧹 Nitpick comments (2)
scripts/build.mjs (2)
206-213:relativePath调用存在跨平台风险
relativePath('/' + file, \/${dist}/${themeStylePath}.scss`)依赖硬编码的/前缀，在 Windows 环境下可能出现混用`、/导致路径解析异常。建议显式使用posix.relative或在拼接前使用replaceAll('\\', '/')统一分隔符，保证跨平台可用性。
295-380: 循环串行执行影响构建时长，可考虑并行化
for … of顺序 await 会使上百个组件的 Sass 编译串行进行，构建时间线性增长。可以用Promise.all+map将每个组件的处理封装为 Promise，并限制并发（例如p-limit40），在不增加 IO 压力的前提下显著缩短打包耗时。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
scripts/build-taro.mjs(8 hunks)scripts/build.mjs(8 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- scripts/build-taro.mjs
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: test
- GitHub Check: build
🔇 Additional comments (1)
scripts/build.mjs (1)
441-452: 计时器标签已正确匹配，问题已解决本次提交中
console.time/console.timeEnd标签一一对应，之前导致脚本崩溃的标签不一致问题已消除。
| const code = sass.compileString(variables + '\n' + postcssRes.css.replaceAll('../../../../', '../../'), { | ||
| loadPaths: [loadPath], | ||
| }) | ||
| await dest(join(`${dist}/es`, cssPath, `${themeDir}/style.css`), code.css) | ||
| await dest(join(`${dist}/cjs`, cssPath, `${themeDir}/style.css`), code.css) | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
replaceAll('../../../../', '../../') 可能误改合法路径
简单的字符串替换会把所有出现的 ../../../../ 统统替换成 ../../，如果组件内原本就存在四级相对路径而非样式 import，将引入潜在路径错误。建议用正则只匹配 @import 中的目标路径或直接依赖 sass 的 loadPaths 解决相对路径问题，避免全局替换。
| return `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}` | ||
| }, | ||
| // 自动加载 scss 样式文件 | ||
| customStyleName: (name) => `@nutui/nutui-react-taro/dist/es/packages/${name.toLowerCase()}/style` |
| | --- | --- | | ||
| | Jingdong APP 10.0 theme (default) | `variables.scss` | | ||
| | Jingdong JDesign Theme | `variables-jdb.scss ` | | ||
| | Jingdong B client Theme | `variables-jdb.scss ` | |
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (2)
src/sites/sites-react/doc/docs/react/start-react.en-US.md (1)
147-152: 修复：删除多余的return
在 Vite 插件的style回调中存在两条return语句，后续代码将不可达。请仅保留符合需求的一条。src/sites/sites-react/doc/docs/react/start-react.md (1)
149-151: 修复：删除多余的return
在 Vite 配置的style回调中存在两条return，导致后续逻辑不可达。请移除不需要的那一条。
🧹 Nitpick comments (3)
src/sites/sites-react/doc/docs/react/start-react.en-US.md (1)
100-100: 优化：避免重复表述
两处 “The entry file needs to import global styles.” 描述相同，建议合并或使用不同措辞以提升文档可读性。Also applies to: 205-205
🧰 Tools
🪛 LanguageTool
[style] ~100-~100: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ... vite-plugin-imp -DThe entry file needs to import global styles. :::demojs /...(REP_NEED_TO_VB)
src/sites/sites-react/doc/docs/react/start-react.md (1)
100-100: 优化：避免重复表述
两处 “入口文件需要引入全局样式” 重复出现，建议合并或替换第二处措辞以提升文档流畅性。Also applies to: 205-205
src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md (1)
22-22: 代码格式：移除多余空格
代码块variables-jdb.scss末尾存在多余空格，建议删除以保持格式一致。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md(2 hunks)src/sites/sites-react/doc/docs/react/official-theme-react.md(2 hunks)src/sites/sites-react/doc/docs/react/start-react.en-US.md(7 hunks)src/sites/sites-react/doc/docs/react/start-react.md(7 hunks)src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md(2 hunks)src/sites/sites-react/doc/docs/taro/official-theme-react.md(2 hunks)src/sites/sites-react/doc/docs/taro/start-react.en-US.md(3 hunks)src/sites/sites-react/doc/docs/taro/start-react.md(3 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/sites/sites-react/doc/docs/taro/official-theme-react.md
🚧 Files skipped from review as they are similar to previous changes (4)
- src/sites/sites-react/doc/docs/react/official-theme-react.md
- src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md
- src/sites/sites-react/doc/docs/taro/start-react.en-US.md
- src/sites/sites-react/doc/docs/taro/start-react.md
🧰 Additional context used
🪛 LanguageTool
src/sites/sites-react/doc/docs/react/start-react.en-US.md
[style] ~100-~100: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ... vite-plugin-imp -D The entry file needs to import global styles. :::demo js /...
(REP_NEED_TO_VB)
[style] ~205-~205: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...el-plugin-import -D The entry file needs to import global styles. :::demo js /...
(REP_NEED_TO_VB)
🪛 markdownlint-cli2 (0.17.2)
src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md
12-12: Spaces inside code span elements
null
(MD038, no-space-in-code)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build
- GitHub Check: test
🔇 Additional comments (4)
src/sites/sites-react/doc/docs/react/start-react.en-US.md (2)
31-36: 示例确认：全量导入主题样式
全量引入@nutui/nutui-react/dist/style.css及其主题注释示例符合预期，示例清晰易读。
61-80: 全局主题样式导入示例清晰完整
展示了 CSS 与 SCSS 多主题文件的路径与注释，对使用者极具指导意义。src/sites/sites-react/doc/docs/react/start-react.md (2)
61-80: 全局主题样式导入示例清晰完整
CSS 与 SCSS 的多主题引入示例一目了然，有助于开发者快速上手。
171-183: 配置确认：SCSS 预处理选项
已正确添加additionalData对应不同主题变量的示例，满足多主题需求。
| // Default Drak theme | ||
| import '@nutui/nutui-react/dist/styles/themes/default-dark.css' |
There was a problem hiding this comment.
文案修正：拼写错误
请将注释中的 “Drak” 更正为 “Dark” （第64、74行），以修复拼写并保证一致性。
Also applies to: 74-75
| // JRKF 默认 | ||
| import '@nutui/nutui-react/dist/style.css' | ||
| // JMAPP 主题 | ||
| // import '@nutui/nutui-react/dist/style-jmapp.css' | ||
| // JRKF 主题 | ||
| // import '@nutui/nutui-react/dist/style-jrkf.css' |
There was a problem hiding this comment.
修复注释错误：错误的主题描述
第31行注释使用了 “JRKF 默认” 作为默认主题，与实际语义不符，建议改为 “默认主题”。
src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md (2)
12-12: 移除代码片段中的多余空格
代码片段内的variables-jmapp.scss包含尾部空格，违反 MD038 规范，建议移除多余空格：- | Jingdong JMAPP Theme | `variables-jmapp.scss ` | + | Jingdong JMAPP Theme | `variables-jmapp.scss` |🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
12-12: Spaces inside code span elements
null(MD038, no-space-in-code)
22-22: 建议统一主题描述命名风格
第一张表使用“Jingdong JMAPP Theme”，第二张表使用“JD JMAPP Theme”，命名不一致，建议统一前缀（JD 或 Jingdong）以提升文档一致性。例如：- | JD JMAPP Theme | `@nutui/nutui-react-taro/dist/styles/themes/jmapp.css` | + | Jingdong JMAPP Theme | `@nutui/nutui-react-taro/dist/styles/themes/jmapp.css` |或将第一张表改为“JD JMAPP Theme”。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md(2 hunks)src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- src/sites/sites-react/doc/docs/react/official-theme-react.en-US.md
🧰 Additional context used
🪛 markdownlint-cli2 (0.17.2)
src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md
12-12: Spaces inside code span elements
null
(MD038, no-space-in-code)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build
- GitHub Check: test
🔇 Additional comments (1)
src/sites/sites-react/doc/docs/taro/official-theme-react.en-US.md (1)
12-12: ✅ 已修复 SCSS 变量文件名
之前报告的variables-jdb.scss错误已更正为variables-jmapp.scss，与实际文件命名保持一致。🧰 Tools
🪛 markdownlint-cli2 (0.17.2)
12-12: Spaces inside code span elements
null(MD038, no-space-in-code)
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (8)
src/sites/sites-react/doc/docs/react/start-react.en-US.md (8)
61-69: 修正拼写错误 “Drak” 至 “Dark”
在此处注释中出现了Default Drak theme，应更正为Default Dark theme。
71-79: 修正拼写错误 “Drak” 至 “Dark”
同样在 SCSS 样式导入注释中，Default Drak theme拼写错误，请改为Default Dark theme。
109-116: 修正拼写错误 “Drak” 至 “Dark”
在 Method 3 的 CSS 导入示例中，注释// Default Drak theme拼写错误，请更新为// Default Dark theme。同时，建议将// JRKF theme统一为// JRKF Theme以保持一致。
117-126: 修正拼写错误 “Drak” 至 “Dark”
在 Method 3 的 SCSS 导入示例中，// Default Drak theme同样需更正为// Default Dark theme。
147-152: 修复 Vite 插件中的双重 return，避免不可达代码
当前示例中同时存在针对 CSS 和 SCSS 的两条return，后者永远不可达。建议仅保留一种返回，并将另一种方案注释或删除。
205-207: 避免文案重复：入口文件全局样式说明
同样在 Webpack 章中出现The entry file needs to import global styles.，建议与前文保持一致的表述调整，避免全文出现相同句式。🧰 Tools
🪛 LanguageTool
[style] ~205-~205: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...el-plugin-import -DThe entry file needs to import global styles. :::demojs /...(REP_NEED_TO_VB)
214-221: 修正拼写错误 “Drak” 至 “Dark”
在 Webpack 的 CSS 导入示例中，// Default Drak theme拼写错误，请更新为// Default Dark theme。
223-231: 修正拼写错误 “Drak” 至 “Dark”
在 Webpack 的 SCSS 导入示例中，// Default Drak theme同样需更正为// Default Dark theme。
🧹 Nitpick comments (4)
src/sites/sites-react/doc/docs/react/start-react.en-US.md (4)
31-36: Method 1 样式导入示例：统一注释格式与命名
建议将注释中的// default theme改为// Default Theme，并保证与后续的// JMAPP Theme、// JRKF Theme大小写一致，以提升整体文档的一致性和可读性。
100-107: 避免文案重复：入口文件全局样式说明
The entry file needs to import global styles.在文档中多次出现，建议丰富表述，例如改为Ensure global styles are imported in your entry file.或者Import the global stylesheet at the entry point.以增加可读性。🧰 Tools
🪛 LanguageTool
[style] ~100-~100: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ... vite-plugin-imp -DThe entry file needs to import global styles. :::demojs /...(REP_NEED_TO_VB)
171-183: 优化 SCSS 预处理配置的注释层次
建议将多主题下的additionalData注释整理到一个清晰的列表或表格中，避免在代码块中插入过多行注释，提升示例代码的可阅读性。
283-287: Babel 插件样式加载示例：注释说明清晰化
建议将// Automatically load SCSS style files.与可选的 CSS 加载注释（// customStyleName: ...style/css）紧挨展示，并在代码上方注明优先级或用途，避免读者混淆两种写法的差异。
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/sites/sites-react/doc/docs/react/official-theme-react.md(2 hunks)src/sites/sites-react/doc/docs/react/start-react.en-US.md(7 hunks)src/sites/sites-react/doc/docs/taro/official-theme-react.md(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/sites/sites-react/doc/docs/taro/official-theme-react.md
🚧 Files skipped from review as they are similar to previous changes (1)
- src/sites/sites-react/doc/docs/react/official-theme-react.md
🧰 Additional context used
🪛 LanguageTool
src/sites/sites-react/doc/docs/react/start-react.en-US.md
[style] ~100-~100: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ... vite-plugin-imp -D The entry file needs to import global styles. :::demo js /...
(REP_NEED_TO_VB)
[style] ~205-~205: You have already used this phrasing in nearby sentences. Consider replacing it to add variety to your writing.
Context: ...el-plugin-import -D The entry file needs to import global styles. :::demo js /...
(REP_NEED_TO_VB)
⏰ Context from checks skipped due to timeout of 90000ms (2)
- GitHub Check: build
- GitHub Check: test
🔇 Additional comments (1)
src/sites/sites-react/doc/docs/react/start-react.en-US.md (1)
317-317: 验证示例仓库分支是否存在
请确认文末链接中feat_v3.x分支在目标仓库中确实存在且路径正确，以免读者点击后出现 404。
2 participants
Summary by CodeRabbit