Bootstrap 4.5.0 SASS error

We’re using Bootstrap 4.5.0 in our SASS project.

We have this sass file:

@import "~bootstrap/scss/bootstrap-grid";
@import "~bootstrap/scss/bootstrap-reboot";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/dropdown";
@import "~bootstrap/scss/utilities/text";
@import "~bootstrap/scss/type";

When we try to compile this, we get this error:

ERROR in node_modules/bootstrap/scss/_root.scss:5:1 Please check validity of the block starting from line #5 [Fatal]

It appears that this piece of code is throwing the error:

@each $color, $value in $colors {
    --#{$color}: #{$value};
  }

We’re using the Dart implementation for SASS, version 1.26.10.

I was unable to create a reproducible example because I keep getting other errors. Please advise.

[tordans]

Sounds like an issue in the linter or Sass compiler? If so, perhaps we close this out?

@mdo the issue is still present in Bootstrap 4.5 ATM, the linked ticket on sass-linkt is from 2017 and I cannot see any relevant action since then https://github.com/sasstools/sass-lint/issues/1114#issuecomment-544216592.

This ticket is a year old now.

I think it would be good to find a solution in Bootstrap (4) and not wait any longer for upstream changes. Could you reopen the ticket? And do you have a preferred way of solving this?

[jordyvandomselaar]

After searching around more, I found this comment.

When I change

// Do not forget to update getting-started/theming.md!
:root {
  // Custom variable values only support SassScript inside `#{}`.
  @each $color, $value in $colors {
    --#{$color}: #{$value};
  }

  @each $color, $value in $theme-colors {
    --#{$color}: #{$value};
  }

  @each $bp, $value in $grid-breakpoints {
    --breakpoint-#{$bp}: #{$value};
  }

  // Use `inspect` for lists so that quoted items keep the quotes.
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
  --font-family-monospace: #{inspect($font-family-monospace)};
}

to

// Do not forget to update getting-started/theming.md!
:root {
  // Custom variable values only support SassScript inside `#{}`.
  @each $color, $value in $colors {
      #{--#{$color}}: #{$value};
  }

  @each $color, $value in $theme-colors {
      #{--#{$color}}: #{$value};
  }

  @each $bp, $value in $grid-breakpoints {
    #{--breakpoint-#{$bp}}: #{$value};
  }

  // Use `inspect` for lists so that quoted items keep the quotes.
  // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
  --font-family-sans-serif: #{inspect($font-family-sans-serif)};
  --font-family-monospace: #{inspect($font-family-monospace)};
}

it compiles successfully.