不兼容的指令

截至撰写本文时，BigCommerce 正在使用 Node-sass 的一个分支，我们计划在未来停用该分支。由于 Stencil CLI 和 BigCommerce 的服务器运行不同版本的 node-sass，因此编译后的 CSS 输出可能存在差异。

本文介绍了已知的不同行为，并描述了如何避免意外的编译器错误，直到 node-sass 分支退出。

例子

由于对 SCSS 指令的支持是在 node-sass 分支之后出现的，因此包含该/文字的 SCSS 指令将在生产中中断，并显示一条错误，指出不支持此语法。

/在 node-sass 分支退出之前，我们不建议在您的 SCSS 文件中使用。

The following example demonstrates the context in which you might pass $hue or encounter it in library packages:

Example: $hue parameter

$color: #1caf9a;
 
body {
  background: change-color($color, $hue: 120);
}

Using $hue leads to different behavior in Stencil CLI versus in production.

We do not recommend including $hue in your SCSS functions until the node-sass fork is sunset.

In production, concatenating an empty string with a quoted string unquotes the string.

The following example demonstrates the context in which you might concatenate an empty string or encounter it in library packages:

Example: Empty string concatenation

@debug "\"foo\"" + "";

空字符串参数会导致 Stencil CLI（支持空字符串连接）和生成（不引用字符串）之间的行为不同。

请特别注意可能接收空字符串作为参数的 SCSS 函数。

例如，考虑以下函数：

示例：使用 if() 的函数

@function foo() {
  @return if(& != null, green, red);
}
 
test {
  color: foo();
}

在前面的例子中，分叉在方法评估中的错误if()导致了以下不同的结果：

模板 CLI 输出

test {
  color: green;
}

产量

test {
  color: red;
}