Bootstrap: Bootstrap 4.5.0 SASS error

[jordyvandomselaar]

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.

[Acharya99]

Try to change the way of importing
@import '../../../node_modules/bootstrap/scss/bootstrap';
like this, then it should work.
Thanks

[Deckluhm]

If you can't reproduce the bug on a reduced test case, that probably means there is no bug or the bug is caused by something else that doesn't work well with Bootstrap (another package, your own code...etc.).

Reproducing bugs is a good way for you to confirm it's actually a bug (and if it's not to understand the issue) and for the Bootstrap team to fix it quickly if it's a confirmed bug.

[jordyvandomselaar]

@Deckluhm it's not that I can't reproduce the error, it's that the repro case has a bunch of unrelated errors so I can't get the reproduction to get to my error :/

[jordyvandomselaar]

@Acharya99 I'll give that a shot. Thanks!

[jordyvandomselaar]

@Acharya99 Unfortunately, the same error occurs. Dart SASS is complaining that Bootstrap is using wrong Sass syntax.

[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.

[jordyvandomselaar]

Related comment: https://github.com/sasstools/sass-lint/issues/1114#issuecomment-544216127

[Acharya99]

@jordyvandomselaar Is the issue resolved?

[mdo]

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

[XhmikosR]

Our CI builds the CSS with both node.sass and dart and both are passing.

This seems like a configuration issue. So, please make sure you update your tooling to the latest versions. If the issue persists, make a public repo with the minimum required stuff to reproduce.

[mdo]

Closing per last couple comments.