SCSS compiling error - Invalid CSS after

Bug reports must include:

Operating system and version (Windows, macOS, Android, iOS)

macOS Big Sur - Version 11.2.1

Browser and version (Chrome, Firefox, Safari, Microsoft Edge, Opera, Android Browser)

The issue is not browser-specific

A reduced test case or suggested fix using CodePen or JS Bin

I have installed bootstrap using node. npm i bootstrap@next and imported bootstrap.scss into my custom stylesheet to customize. styles.scss

When I try to compile it gives the following kind of errors

error scss/styles.scss (Line 9 of node_modules/bootstrap/scss/mixins/_table-variants.scss: Invalid CSS after "... #{$background}": expected "{", was ";")

I have also posted a question on the StackOverflow https://stackoverflow.com/questions/66148648/bootstrap-5-beta-scss-compiling-error-invalid-css

[loopy3025]

I’m getting this error with

• node-sass 7.0.1
• grunt 1.5.2
• grunt-sass 3.1.0

Which are all fairly recent.

Am I missing a dependency?

Running "sass:dist" (sass) task
Fatal error: Error: Invalid CSS after "...     floor(math": expected expression (e.g. 1px, bold), was ".div($grid-gutter-w"
        on line 369 of node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss
        from line 8 of node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss
        from line 2 of scss/style.scss
>> vbar-padding-horizontal:        floor(math.div($grid-gutter-width, 2)) !defa
   ------------------------------------------^

I’ve also attempted switching from node-sass to dart-sass and I get the same error, just formatted nicer.

Fatal error: Error: Undefined function.
    ╷
369 │ $navbar-padding-horizontal:        floor(math.div($grid-gutter-width, 2)) !default;
    │                                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss 369:42  @import
  node_modules/bootstrap-sass/assets/stylesheets/_bootstrap.scss 8:9               @import
  scss/style.scss 2:9                                                              root stylesheet

However, that is with dart-sass 1.25.0. npm doesn’t think that 1.32.11 exists.

Rolling back to bootstrap-sass 3.3.7 solves it for now.

[akuma6099]

Just wanted to confirm it is a sass/scss compiler issue. I had “Sass 3.4.23 (Selective Steve)” from “apt-get install ruby-sass”. Had to remove it and grab the latest Dart Sass 1.32.11 @ https://github.com/sass/dart-sass/releases/tag/1.32.11

Problem solved.