Can't run npm run build with react bootstrap + ts + sass

Describe the bug

With the latest version, it is not possible to run the build script. It gives a syntax error (see screenshots). The mentioned line and column in the error is consistent irregardless of where the bootstrap import line is.

To Reproduce

Steps to reproduce the behavior:

# 1. Create a basic react typescript template
npx create-react-app my-app --template typescript
# 2. Install react-bootstrap, bootstrap and sass
npm install react-bootstrap@next bootstrap@5.1.0 sass
# 3. Change the template css to scss
mv src/App.css src/App.scss
# 4. Add @import "~bootstrap/scss/bootstrap"; to the top of App.scss
# 5. Change the import from css to scss in App.tsx

Reproducible Example

Cannot reproduce on CodeSandbox, since you can’t run builds there (or I’m blind)

Expected behavior

The build script to complete successfully and filling the build folder.

Screenshots

Environment (please complete the following information)

• Operating System: Windows, also tested on Debian Linux
• Browser: Irrelevant
• React-Bootstrap Version: 2.0.0-beta.6

Additional context

Tried talking about this in the Discord channel, at least one other user has the same issue.

[kyletsang]

Bootstrap 5.1.2 has been released with the workaround

[kyletsang]

Seems like it’s caused by the margin values inside make-row in mixins/_grid.scss.

It’ll compile if I change this:

margin-top: calc(var(--#{$variable-prefix}gutter-y) * -1); // stylelint-disable-line function-disallowed-list
margin-right: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list
margin-left: calc(var(--#{$variable-prefix}gutter-x) * -.5); // stylelint-disable-line function-disallowed-list

to this:

margin-top: calc(-1 * var(--#{$variable-prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$variable-prefix}gutter-x)); // stylelint-disable-line function-disallowed-list