使用node-sass编译SASS @functions失效无报错，求对应配置或标志

使用node-sass编译SASS文件至CSS时，自定义SASS函数未被正确编译，但执行编译命令无任何报错。具体场景：

• 自定义函数定义在_function.scss局部文件中，该文件被导入到settings.scss，所有业务SASS文件均导入了settings.scss
• 函数代码：

@function rem($value) {
  $remValue: calc($value / $root) + rem;

  @return $remValue;
}

• 函数使用示例：

.tabs__trigger {
  height: rem(5);
 }

• 执行的编译命令：

node ./node_modules/node-sass/bin/node-sass -o dist/css src/scss

• 编译后生成的CSS内容：

.tabs__trigger {
  height: calc($value / $root)rem;
}

疑问：是否需要特定的标志或配置，才能让node-sass正确编译该SASS函数？

这不是node-sass的配置问题，而是你的SASS函数写法和变量引用存在错误，修正后即可正常编译：

• 确保$root变量可被函数访问：$root变量必须在_function.scss中能被解析到。要么在_function.scss开头导入定义$root的文件，要么调整settings.scss的导入顺序——先定义$root，再导入_function.scss。
• 修正单位拼接的写法：SASS中直接用+ rem会把rem当作普通字符串拼接，无法正确解析为CSS单位。正确的写法需要使用插值语法#{}，或者直接计算数值后拼接单位：
  示例1（不依赖calc）：

  @function rem($value) {
    $root: 16; // 或确保该变量已提前定义并可访问
    $remValue: ($value / $root) * 1rem;
    @return $remValue;
  }
  

  示例2（保留calc的场景）：

  @function rem($value) {
    $root: 16;
    @return calc(#{$value} / #{$root}) rem;
  }
  

• 检查全局导入顺序：所有使用rem()函数的SASS文件，必须确保在导入时已经加载了settings.scss（即已完成变量定义和函数导入），避免函数未被提前解析。

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