如何修复Dart Sass中使用Bulma时的未定义操作错误？

错误原因 #

• 你使用的Dart Sass 1.45.1版本不支持对CSS原生min()函数的执行结果直接进行减法运算。早期Dart Sass会将min()解析为自身内置函数，当参数包含100vw这类无法在编译期确定具体数值的单位时，Sass无法计算出min(1216px, 100vw)的结果，后续的- 64px操作自然会触发"Undefined operation"错误。
• Bulma的这段代码采用了CSS原生的min()逻辑，但旧版Dart Sass尚未兼容这种对CSS函数结果直接做算术操作的写法。

解决办法 #

1. 升级Dart Sass版本 #

将Dart Sass升级到1.54.0及以上版本，该版本开始支持对CSS原生min()/max()函数的结果进行算术运算，能正确解析min(...) - 64px这类表达式。

2. 临时兼容方案（无需升级版本） #

如果暂时无法升级Sass，可通过以下两种方式处理：

• 提前定义变量值：在导入Bulma前，直接定义$container-max-width为预计算后的数值，避免编译期运算：

  $container-max-width: 1152px; // 对应min(1216px, 100vw) - 64px的静态值，可根据需求调整
  @import "../../../../libraries/node_modules/bulma/bulma.sass";
  

• 用calc()包裹运算：修改Bulma源码中出错的行，将运算交给浏览器在运行时处理：

  max-width: calc(min($widescreen, $container-max-width) - $container-offset);
  

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