React项目运行npm start报SassError复合选择器无法@extend如何解决？

报错原因 #

Dart Sass 从1.33.0版本开始移除了对@extend复合选择器的支持，你代码里的.dropdown-item.active是由两个类拼接组成的复合选择器，直接用@extend扩展就会触发当前编译报错。

解决方案 #

方案1：改动最小的官方推荐写法 #

把src/assets/scss/bootstrap_typeaheadjs.scss文件中第16行的代码：

@extend .dropdown-item.active;

替换为逗号分隔的单选择器写法即可：

@extend .dropdown-item, .active;

修改后重新执行npm start就能正常编译。

方案2：无需修改业务代码的兼容方案 #

如果项目中多处用到了复合选择器的@extend写法，不想逐个修改，可以降级项目依赖的sass版本到支持旧语法的版本：

1. 先卸载当前的sass包：

npm uninstall sass

2. 安装兼容旧语法的低版本sass：

npm install sass@1.32.13 --save-dev

3. 重新执行npm start即可正常编译。

方案3：避免全局样式污染的写法 #

如果担心直接扩展全局.active类会造成样式冲突，可以把Bootstrap中.dropdown-item.active对应的所有样式规则，直接复制到.tt-suggestion.tt-cursor选择器内即可，不需要使用@extend：

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0d6efd;
  /* 补充其他和dropdown-item.active完全一致的样式规则 */
}

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