“错误：此规则在这里是不允许的。”导入材料设计图标SCSS

Question

我正尝试使用材料设计图标扩展Bootstrap accordion example，使人字形朝上或朝下，具体取决于列表项是否被展开。

为此，我正在尝试应用以下SCSS，

@import "../node_modules/bootstrap/scss/bootstrap";
@import "../node_modules/@mdi/font/scss/materialdesignicons";

#accordion button {
  @extend .text-left;
  @extend .w-100;

  &[aria-expanded='true'] i {
    @extend .mdi-chevron-down;
  }
  &[aria-expanded='false'] i {
    @extend .mdi-chevron-up;
  }
}

此HTML

    <div class="card">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-light" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <i class="mdi mdi-chevron-up float-right"></i>
            Pipeline Integrity Assessment and Design
          </button>
        </h5>
      </div>
      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
        <div class="card-body">
          Our services include the design and assessment of subsea pipelines for lateral and/or upheaval buckling, arctic pipelines subject to ice gouging, stamukha loadings and/or thaw settlements, and pipelines crossing active faults, as well as more routine design and assessment.
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header" id="headingTwo">
        <h5 class="mb-0">
          <button class="btn btn-light collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            <i class="mdi mdi-chevron-down float-right"></i>
            Structural Reliability Assessment (SRA)
          </button>
        </h5>
      </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
        <div class="card-body">
          <p>Ralf Peek has over 30 years of experience in the area of structural reliability assessment and the estimation and assessment of uncertainties affecting structural performance in order to ensure that safety margins are adequate to cover such uncertainties. His specific experience includes:
            <ul>
                <li>Reliability-based design of buried arctic subsea pipeline against loading by ice keels gouging the sea floor</li>
                <li>SRA for pipelines subject to lateral buckling under thermal expansion</li>
                <li>Operating pipelines subject to extreme conditions (for example, turbidity current loading)</li>
                <li>Probabilistic response-based seismic loading assessment criteria</li>
                <li>Nuclear containment structural reliability assessment</li>
            </ul>
        <p>Peek Solutions can also coordinate and deliver Quantitative Risk Assessment (QRA), where necessary arranging for inputs on hydrocarbon release modeling from others.  (QRA includes assessment of the consequences of failure as well as the probability of occurrence, and typically involves integration of multidisciplinary inputs, as well as inputs based on local knowledge into a model).
        </p>
        </div>
      </div>
    </div>
</div>

在我的项目中，我在scss/main.scss中有SCSS位置，并且我在package.json中具有以下依赖关系：

  "dependencies": {
    "@mdi/font": "^2.2.43",
    "bootstrap": "^4.1.1"
  },

在编译SCSS（使用grunt watch命令）时出现的错误是：

>> File "scss/main.scss" changed.
Running "sass:dist" (sass) task
Error: This at-rule is not allowed here.
        @return unquote("\"\\#{$character-code}\"");
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  node_modules/@mdi/font/scss/_functions.scss 3:9           root stylesheet
  node_modules/@mdi/font/scss/materialdesignicons.scss 3:9  @import
  scss/main.scss 2:9                                        root stylesheet
Warning: Exited with error code 65 Use --force to continue.

Aborted due to warnings.

这是违规文件_functions.scss的内容：

@function char($character-code) {
    @if function-exists("selector-append") {
        @return unquote("\"\\#{$character-code}\"");
    }

    @if "\\#{'x'}" == "\\x" {
        @return str-slice("\x", 1, 1) + $character-code;
    }
    @else {
        @return #{"\"\\"}#{$character-code + "\""};
    }
}

@function mdi($name) {
    @if map-has-key($mdi-icons, $name) == false {
        @warn "Icon #{$name} not found.";
        @return "";
    }
    @return char(map-get($mdi-icons, $name));
}

为什么这里不允许使用规则？我该如何解决/解决此错误？