Bootstrap 4.3.1自定义Sass覆写变量时遇rem/px单位不兼容错误

这个错误我之前帮人排查过好几次，核心原因就是你自定义的Bootstrap变量里同时混用了rem和px单位，导致Sass在计算$custom-select-feedback-icon-padding-right的calc表达式时触发了单位不兼容的问题。下面给你几个具体的解决思路：

1. 统一所有相关变量的单位 #

Bootstrap的这个calc表达式依赖$custom-select-padding-y、$custom-select-padding-x、$custom-select-indicator-padding这几个变量，你需要确保这些变量的单位完全一致——要么全用rem，要么全用px。

比如如果之前你是这么写的：

$custom-select-padding-y: 8px; // px单位
$custom-select-padding-x: 0.75rem; // rem单位

把它们改成统一的rem单位（1rem默认等于16px，所以8px=0.5rem）：

$custom-select-padding-y: 0.5rem;
$custom-select-padding-x: 0.75rem;

或者统一成px单位：

$custom-select-padding-y: 8px;
$custom-select-padding-x: 12px; // 0.75rem = 12px

2. 用Bootstrap内置函数转换单位 #

如果你不想手动换算单位，可以用Bootstrap自带的rem()或px()函数来自动转换，这样能保证所有参与计算的变量单位统一。

比如把px变量转成rem：

// 先导入Bootstrap的函数，才能使用转换函数
@import "node_modules/bootstrap/scss/functions";

// 用rem()函数把px值转成rem
$custom-select-padding-y: rem(8px);
$custom-select-padding-x: rem(12px);
$custom-select-indicator-padding: rem(4px);

这样所有变量都会被转换成rem单位，calc表达式就能正常计算了。

3. 确认正确的导入顺序 #

你提到已经调整了导入顺序，但再检查一下是否是正确的顺序：

// 1. 先导入Bootstrap的函数（必须最先，否则转换函数用不了）
@import "node_modules/bootstrap/scss/functions";

// 2. 在这里覆写你的所有自定义变量（这一步要在导入variables之前）
$custom-select-padding-y: 0.5rem;
// 其他自定义变量...

// 3. 再导入Bootstrap的变量和mixins
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// 4. 最后导入Bootstrap的核心样式
@import "node_modules/bootstrap/scss/bootstrap";

如果把覆写变量的步骤放在导入variables之后，你的自定义变量不会生效，反而会用Bootstrap默认的变量，也可能引发单位冲突。

为什么会出现这个错误？ #

Sass在处理calc()表达式时，会先尝试解析里面的变量运算。如果变量里同时有rem和px，Sass无法直接进行数学计算（因为这是两种不同的相对/绝对单位），所以就抛出了"Incompatible units"的错误。而浏览器原生的calc()其实支持混合单位，但Bootstrap这里是用Sass变量拼接生成calc表达式，所以必须先让Sass能正常计算变量部分。

内容的提问来源于stack exchange，提问作者Janindu