时间戳

首页 > 解决方案 > SassError：复合选择器可能不再被扩展

node.js - SassError：复合选择器可能不再被扩展

问题描述

当我运行 npm start 时，我在我的反应应用程序中遇到了这个错误。我正在使用节点：v14.17.6 和 npm：6.14.9

编译失败。

./src/index.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules /resolve-url-loader??ref--5-oneOf-6-3!./node_modules/react-scripts/node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4 !./src/index.scss) SassError：复合选择器可能不再被扩展。@extend .dropdown-item, .active改为考虑。有关详细信息，请参阅https://sass-lang.com/documentation/at-rules/extend#disallowed-selectors 。

╷ 16 │ @extend .dropdown-item.active; │ ^^^^^^^^^^^^^^^^^^^^^ ╵ src\assets\scss\bootstrap_typeaheadjs.scss 16:13 根样式表

这是 _typeaheadjs.scss 内容

span.twitter-typeahead {
  width: 100%;

  .tt-menu {
    @extend .dropdown-menu;
    width: 100%;
  }

  .tt-suggestion {
    @extend .dropdown-item;
    font-size: 14px;
  }

  .tt-suggestion.tt-cursor {
    @extend .dropdown-item.active;
  }

  .input-group & {
    display: flex !important;
    align-items: center;
    position: relative;
    flex: 1 1 auto;
    width: 1%;

    .tt-menu, .tt-hint, .tt-input {
      width: 100%;
    }
  }
}

标签： node.jsreactjsnpmsass

解决方案

官方文档：

@extend 的定义表明匹配扩展器的元素将被设置为就好像它们匹配 .message.info 一样。这与匹配 .message 和 .info 相同，因此编写它而不是 @extend .message、.info 不会有任何好处。

.tt-suggestion.tt-cursor {
  @extend .dropdown-item, active;
}

推荐阅读