Angular报错记录 - Base-level rules cannot contain the parent-selector-referencing character '&'.

最近angular-cli升级到1.7.4编译报错：

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./src/styles.scss
Module build failed: 
    &::-webkit-scrollbar-thumb{ /* 滑块颜色 */
   ^
      Base-level rules cannot contain the parent-selector-referencing character '&'.
      in D:\code\merchant-web\src\base.scss (line 170, column 5)

解决办法：

#{if(&, "&", "*")}::-webkit-scrollbar-thumb{ /* 滑块颜色 */
    background: $color;
    border-radius: $width / 2;
}

参考：https://github.com/sass/sass/issues/1873

This error has existed since 3.0 which was released in May 2010.

It's nonsensical to refer to a parent selector at the base-level of a stylesheet. Inferring that & should be the universal selector at the root level is not at all a safe assumption. Additionally, this is often indicative of a coding mistake. So we consider it an error.

If this was part of a mixin that is sometimes included at the base level and sometimes nested, you can write the mixin like this: