Quasar应用Sass代码报错：无法定位行号，选择器无属性未渲染

问题描述 #

在Quasar应用中运行Sass代码时，收到sass-loader的警告：

Module Warning (from ./node_modules/sass-loader/dist/cjs.js): This selector doesn't have any properties and won't be rendered.
警告末尾附带“null”内容，已确认:hover后无空格，但问题仍未解决。

原Sass代码 #

.GL
&__select-GL__menu-link
 .default-type
   color: black
   visibility: hidden
&:hover
  background: black
  color: black
  .default-type
  color: black
    visibility: visible
&__toolbar-link
a
  color: black
  text-decoration: none
  &:hover
    opacity: 0.7
 &__menu-link:hover
background: b-primary
color: black
&__menu-link-signed-in,
&__menu-link-status
&:hover
  & > div
    background: white !important
    color: black
&__menu-link-status
  &:hover
  color: black

错误原因分析 #

警告核心是存在无属性的空选择器，完全由代码缩进层级混乱导致：

• .GL:hover .default-type 选择器后，color: black缩进错误，导致该选择器没有属性，color被当成了同级独立规则
• .GL__toolbar-link &__menu-link:hover 缩进错误，且background、color未正确嵌套在选择器下，导致选择器为空
• .GL__menu-link-signed-in, .GL__menu-link-status 两个选择器后直接接&:hover，缩进错误使这两个选择器本身无任何属性
• .GL__menu-link-status &:hover 选择器后color: black缩进错误，导致&:hover选择器为空

修正后的Sass代码 #

.GL
  &__select-GL__menu-link
    .default-type
      color: black
      visibility: hidden
  &:hover
    background: black
    color: black
    .default-type
      color: black
      visibility: visible
  &__toolbar-link
    a
      color: black
      text-decoration: none
      &:hover
        opacity: 0.7
    &__menu-link:hover
      background: b-primary
      color: black
  &__menu-link-signed-in,
  &__menu-link-status
    &:hover
      & > div
        background: white !important
        color: black
  &__menu-link-status
    &:hover
      color: black

内容的提问来源于stack exchange，提问作者jdost_26