title: sass-loader not parsing SASS properly
body: <p>I have added the <code>sass-loader</code> but it's not actually parsing the sass files properly.</p>
  
  <p>The below styles aren't parsed properly and thus the nested styles doesn't work in the browser.</p>
  
  <p><strong>_navigation.scss</strong></p>
  
  <pre><code>.el-menu-item {
    float: left;
    height: 60px;
    line-height: 60px;
    margin: 0;
    border-bottom: 2px solid transparent;
    color: #909399;
  
    &amp;.is-active {
      color: #909399 !important;
    }
  
    .router-link-active {
      color: inherit;
      text-decoration: none;
    }
  }
  </code></pre>
  
  <p>However, if I move these nested styles out in the same <code>_navigation.scss</code> file... it works.</p>
  
  <p><strong>_navigation.scss</strong></p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p><strong>My packages</strong></p>
  
  <pre><code>"webpack": "^4.4.1"
  "style-loader": "^0.20.3"
  "css-loader": "^0.28.11"
  "sass-loader": "^6.0.7"
  </code></pre>
  
  <p><strong>webpack.common.js</strong></p>
  
  <pre><code>{
      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
      }]
  }
  </code></pre>