Skip to content

fix(avatar): Fix avatar styles SASS error

Enrique Alcántara requested to merge fix-avatar-sass-compile-error into master

When trying to use gitlab-ui in a project with version 1.25.0 or greater of node-sass, the avatar styles break the build with this error:

./src/assets/styles/global.scss (./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-3-1!./node_modules/postcss-loader/src??ref--8-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-3-3!./src/assets/styles/global.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Top-level selectors may not contain the parent selector "&".

82 │   &.gl-avatar-identicon-bg#{$i} {
   │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

  node_modules/@gitlab/ui/src/components/base/avatar/avatar.scss 82:3  @import
  node_modules/@gitlab/ui/src/scss/components.scss 7:9                 @import
  /Users/enriquealcantara/gitlab/status-page/src/assets/styles/global.scss 18:9                                                           root stylesheet

We are incorrectly using the parent selector (&) in a top-level selector. I discovered this bug in the status page project: https://gitlab.com/gitlab-org/status-page/

Edited by 🤖 GitLab Bot 🤖

Merge request reports