🐛 Upload 组件 SCSS 编译错误 & 开启 sass 插件后 common/style/index.wxss 路径解析失败 #4296
Description
问题描述
开启微信开发者工具的 SASS 编译器插件后，存在两个编译错误：
Bug 1：Upload 组件 rgba() 参数缺失
错误信息：
miniprogram/miniprogram_npm/tdesign-miniprogram/upload/upload.scss 9:150 root stylesheet
Error: $color: 0 is not a color.
原因： upload.less 第 9 行定义了不完整的 RGBA 颜色值：
// 当前（错误）— 只有 2 个参数
@upload-disabled-mask: var(--td-upload-disabled-mask, rgba(0, 0.6));
// 正确 — 需要 4 个参数 (r, g, b, a)
@upload-disabled-mask: var(--td-upload-disabled-mask, rgba(0, 0, 0, 0.6));对比项目中其他正确的 RGBA 定义：
_variables.less:228→@mask-active: var(--td-mask-active, rgba(0, 0, 0, 0.6));✅_variables.less:229→@mask-disabled: var(--td-mask-disabled, rgba(255, 255, 255, 0.6));✅upload.less:9→rgba(0, 0.6)❌
Bug 2：开启 sass 插件后 @import '../common/style/index.wxss' 路径解析失败
错误信息：
[WXSS 文件编译错误]
path `../common/style/index.wxss` not found from `./miniprogram_npm/tdesign-miniprogram/action-sheet/action-sheet.wxss`
原因： 构建脚本 script/gulpfile.base.js 会自动为每个组件注入：
@import '../common/style/index.wxss';当用户项目配置了 "useCompilerPlugins": ["sass"] 时，微信开发者工具的 SASS 编译器会处理 npm 包中的 .scss 文件，编译产物中保留了该 @import，但 WXSS 运行时解析器在 miniprogram_npm 内无法正确解析此相对路径。
此问题影响所有 TDesign 组件，不仅限于 action-sheet。
复现步骤
- 安装
tdesign-miniprogram@1.12.3 - 在
project.config.json中配置："useCompilerPlugins": ["typescript", "sass"]
- 在微信开发者工具中执行「构建 npm」
- 编译项目
环境信息
- tdesign-miniprogram: 1.12.3
- 微信开发者工具: 2.01.2510280 (macOS)
- 基础库: 3.14.2
建议修复方案
Bug 1
packages/components/upload/upload.less 第 9 行：
-@upload-disabled-mask: var(--td-upload-disabled-mask, rgba(0, 0.6));
+@upload-disabled-mask: var(--td-upload-disabled-mask, rgba(0, 0, 0, 0.6));packages/uniapp-components/upload/upload.less 同样需要修复。
Bug 2
建议在 script/gulpfile.base.js 的构建流程中，将 common style 的 @import 改为内联方式，避免在 miniprogram_npm 中依赖相对路径解析：
// 当前：注入 @import
contents = `@import '${relativePath}';${contents}`;
// 建议：内联 common style 内容
const commonStyleContent = fs.readFileSync(baseCssPath, 'utf8');
contents = `${commonStyleContent}${contents}`;这样可以彻底消除路径依赖问题，且 common style 内容极小（仅 .hotspot-expanded 相关样式），对包体积影响可忽略。