jdf2e NutUI Taro 小程序 WXSS 编译治理
1. 背景与根因
现象：[ WXSS 文件编译错误] something must be wrong + Error: timeout；偶发 无效的 app.json ["renderingMode"]。
根因：app.ts → nutui.react.scss.taro.ts 曾 100+ 条独立 import 组件 scss；Taro sass.resource 向每个文件注入 variables.scss + theme-default.scss（含 base64 @font-face）。
| 指标 | 修复前 | 修复后（bundle） |
|---|---|---|
app-origin.wxss |
~4MB | ~0.3–0.9MB |
@font-face 重复 |
~216 | ~2–10 |
不是单个组件（如 switch.scss）的 bug，而是 demo 全量样式打包方式 导致。
数据流（修复后）：
app.ts → nutui.react.scss.taro.ts → nutui.react.scss.taro.bundle.scss
├─ variables + theme（各 1 次）
└─ 全部组件 scss → dist/weapp/app-origin.wxss
2. 最小改动清单
| 文件 | 改动 |
|---|---|
scripts/taro/generate-nutui-taro.js |
新增 bundleScssStr；遍历组件拼 @import；nutui.react.scss.taro.ts 改为单 import bundle；新增写 nutui.react.scss.taro.bundle.scss |
src/packages/nutui.react.scss.taro.bundle.scss |
variables/theme + 全部组件 @import（自动生成，勿手改） |
scripts/build-taro.mjs |
buildCSS / buildHarmonyCSS 的 glob 排除 nutui.react.scss.taro.bundle.scss，避免打进 npm 按组件发包 |
scripts/harmony/update-taro-entry.js |
删除 renderingMode: 'mixed' |
scripts/taro/generate-taro-route.js |
同上 |
nutui.react.scss.ts（H5）不变，generate-nutui.js仍生成 100+ 条 JS import- 勿只改
app.config.ts：predev:taro会跑update-taro-entry.js覆盖 - 不在最小集：
config/index.jsminimize、各组件 scss calc 优化、package.jsondev:weapp
边界说明（H5 / 发包）
| 场景 | 是否走 bundle | 说明 |
|---|---|---|
H5 文档站 sites/mobile + nutui.react.scss.ts |
否 | Vite additionalData 只注入 variables，theme 在 main.tsx 单独 import 一次，无 wcsc 超时问题 |
Taro demo dev:taro（weapp / h5） |
是 | app.ts → nutui.react.scss.taro.ts → bundle |
Taro 发包 build:taro |
否 | bundle 被 glob exclude；构建结束会删除 nutui.react.scss.js；业务方仍 import '@nutui/nutui-react-taro/dist/es/packages/xxx/style' |
3. 解决 / 好处 / 影响
解决：WXSS 超时；无效 renderingMode 警告；demo 可预览（需登录开发者工具 + 清缓存）。
好处：样式单入口；不改 build:taro 发包；新增组件仍由 generate-nutui-taro.js 写入 bundle。
| 命令 | 影响 |
|---|---|
dev:taro weapp |
有 |
build:taro / build:taro:demo |
无（bundle 已在 build-taro.mjs glob 中排除） |
prepare / generate:file:taro |
有（再生 bundle） |
VITE_APP_PROJECT_ID=jmapp |
bundle 写死 default 主题，需另行验证 |
已知限制：build:weapp 生产压缩时 postcss-calc 可能破坏嵌套 var+calc（dev 无此问题）；游客模式 webapi_getwxaasyncsecinfo:fail 为环境问题。
4. 验证
pnpm run dev:taro weapp
wc -c packages/nutui-taro-demo/dist/weapp/app-origin.wxss
grep -c '@font-face' packages/nutui-taro-demo/dist/weapp/app-origin.wxss
期望：体积远小于 4MB；@font-face 为个位数。
5. 未采纳方案（备查）
| 方案 | 未采纳原因 |
|---|---|
| 各组件 scss 局部 CSS 变量 | 非主因，扩大 diff |
config/index.js minimize(false) |
dev 不需要 |
webpackImporter: false |
引发 Module not found |
| sass.resource 置空 | 嵌套 @import（popup→overlay）缺变量 |
| 手改 app.config.ts | predev:taro 会覆盖 |
6. Agent 自检
- 只改生成脚本 + bundle +
build-taro.mjsexclude，未扩大组件 scss diff？ -
build-taro.mjs已排除nutui.react.scss.taro.bundle.scss？ - 两个生成脚本已去掉
renderingMode？ - 仍超时：查
app-origin.wxss体积、游客模式、是否未重新 dev