node-sass 7.0.1中:not伪类编译异常问题求助

问题场景 #

使用node-sass 7.0.1编译以下SCSS代码时，编译结果丢失了:not伪类部分，且无任何错误提示：

原SCSS代码：

.wf-field--inline {
    & > *:not(label + *) {
        border-top-left-radius: 0 !important;
    }
}

错误编译输出：

.wf-field--inline > * ;

解决思路 #

• 调整:not内选择器的语法
  node-sass依赖的LibSass对复杂复合选择器的解析存在局限性，给:not内部的相邻兄弟选择器加上括号，明确语法结构后就能正确编译：

  .wf-field--inline {
      & > *:not((label + *)) {
          border-top-left-radius: 0 !important;
      }
  }
  

  编译后可得到正确的CSS：

  .wf-field--inline > *:not(label + *) {
      border-top-left-radius: 0 !important;
  }
  

• 替换为dart-sass
  node-sass已停止维护，官方推荐使用dart-sass（npm包名为sass）替代。它对CSS新特性和复杂选择器的支持更完善，无需修改原有代码即可正常编译：

  npm uninstall node-sass
  npm install sass --save-dev
  

• 拆分选择器实现相同效果
  如果暂时无法更换编译器或修改语法，可以通过拆分选择器的方式实现等价效果：

  .wf-field--inline > * {
      border-top-left-radius: 0 !important;
  }
  .wf-field--inline > label + * {
      border-top-left-radius: initial !important;
  }
  

  先给所有子元素设置样式，再覆盖label相邻兄弟元素的样式，达到和原代码一致的视觉效果。

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