sass-loader没有正确解析SASS

Question

我添加了sass-loader，但实际上并没有正确解析sass文件。

以下样式未正确解析，因此嵌套样式在浏览器中无效。

_navigation.scss

.el-menu-item {
  float: left;
  height: 60px;
  line-height: 60px;
  margin: 0;
  border-bottom: 2px solid transparent;
  color: #909399;

  &.is-active {
    color: #909399 !important;
  }

  .router-link-active {
    color: inherit;
    text-decoration: none;
  }
}

但是，如果我将这些嵌套样式移出同一个_navigation.scss文件......它就可以了。

_navigation.scss

.el-menu-item {
  float: left;
  height: 60px;
  line-height: 60px;
  margin: 0;
  border-bottom: 2px solid transparent;
  color: #909399;
}

.el-menu-item.is-active {
  color: #909399 !important;
}

.router-link-active {
  color: inherit;
  text-decoration: none;
}

我的套餐

"webpack": "^4.4.1"
"style-loader": "^0.20.3"
"css-loader": "^0.28.11"
"sass-loader": "^6.0.7"

webpack.common.js

{
    test: /\.scss$/,
    use: [{
        loader: "style-loader" // creates style nodes from JS strings
    }, {
        loader: "css-loader" // translates CSS into CommonJS
    }, {
        loader: "sass-loader" // compiles Sass to CSS
    }]
}