React项目中使用scss插值语法

Question

1. react项目是使用create-react-app创建的，
2. 通过安装node-sass: "^4.7.2"和sass-loader"^6.0.7"解析.scss文件，
3. 当使用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 应该在最前面执行才对？