React项目中使用scss插值语法

Question

react项目是使用create-react-app创建的，

通过安装node-sass: "^4.7.2"和sass-loader"^6.0.7"解析.scss文件，

当使用scss的插值#{}时会报错，不使用的话没有问题，这是怎么问题？

初次接触scss，请大佬们指点迷津

部分代码（tabs.scss）

$class-prefix: "tabs";

.#{$class-prefix}{

  &-bar {

    margin-bottom: 16px;

  }

  &-nav {

    font-size: 14px;

    &:after,

    &:before {

      display: table;

      content: " ";

    }

    &:after {

      clear: both;

    }

  }

报错信息

配置代码

官网查了下插值语法该是这样用啊

Answer 1

scss 没问题，错误应试是 postcss 或者更前面的 loader 出的吧， sass-loader 应该在最前面执行才对？