嵌套的scss规则不在反应项目中呈现

Question

我可能会遗漏一些显而易见的东西，但出于某种原因，当我尝试嵌套sass规则时，没有任何渲染。然而，其他方面似乎都很好。

在这种情况下，悬停不起作用。

JSX：

const SidebarSection = (props) =>
 <div className={styles.sidebarPane}>
  <ul className={styles.navList}>
    <li className={styles.navElement}>{props.element}</li>
  </ul>
 </div>;

scss示例规则：

    .navElement {
     cursor: pointer;
     margin: .5rem 0 0 0;
      &:hover {
        color:yellow;
      }
    }

Webpack css / sccs加载器：

 test: /\.(css|scss)$/,
  use: [{
    loader: 'style-loader',
  }, {
    loader: 'css-loader',
    options: {
      modules: true,
    },
  }, {
    loader: 'postcss-loader',
  }