Importing bootstrap.scss breaks SASS compilation

[heydarm]

• Operating system and version: WIndows 10
• Browser and version: Chrome 93
• Suggested fix: Use math.max() instead of max().

I have create-react-app project (react-scripts@4.0.3). It works if I do npm start, but not when npm run build.
This error occurs if you're using Dart SASS 1.40.0 and higher.

SassError: 0.2rem and 0 are incompatible.
  ╷
9 │       $return: append($return, max($value, 0));
  │                                    ^^^^^^ 0.2rem
  │                                            ━ 0
  ╵
  node_modules\bootstrap\scss\mixins\_border-radius.scss 9:36   valid-radius()
  node_modules\bootstrap\scss\mixins\_border-radius.scss 20:20  border-radius()
  node_modules\bootstrap\scss\_reboot.scss 322:3                @import
  node_modules\bootstrap\scss\bootstrap.scss 17:9               @use
  src\styles\custom.scss 1:1                                    @use
  src\styles\index.scss 1:1                                     root stylesheet

[danielmatthew]

That error was supposedly resolved in 1.40.1.

However, while that particular error has been resolved, something else within the Bootstrap partials results in a build fail across the following versions – when using CRA.

• 1.40.1
• 1.41.0
• 1.41.1
• 1.42.0

Dropping Sass back to 1.39.2 means it works again.

> Executing task: yarn run build <

yarn run v1.22.11
$ react-scripts build
Creating an optimized production build...
Failed to compile.

./src/index.scss
ParserError: Syntax Error at line: 1, column 25

// index.scss
@import "bootstrap/scss/bootstrap";

{
  "name": "bootstrap-cra-test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "bootstrap": "5.1.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.0.1"
  },
  "devDependencies": {
    "sass": "1.42.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

[danielmatthew]

I performed a binary search (of sorts) on the various Bootstrap partials. I believe it is @import "grid"; at fault…

If bootstrap.scss looks like this:

/*!
 * Bootstrap v5.1.1 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

// scss-docs-start import-stack
// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";

@import "type";
@import "images";
@import "containers";

// @import "grid";
@import "tables";

@import "forms";
@import "buttons";

@import "transitions";
@import "dropdown";
@import "button-group";

@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";

@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";
@import "placeholders";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";
// scss-docs-end import-stack

… it compiles successfully:

> Executing task: yarn run build <

yarn run v1.22.11
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  41.36 KB  build/static/js/2.3f576723.chunk.js
  22.1 KB   build/static/css/main.d7defe71.chunk.css
  1.63 KB   build/static/js/3.c1b9a49c.chunk.js
  1.18 KB   build/static/js/runtime-main.7142672f.js
  621 B     build/static/js/main.729cc8c7.chunk.js

The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.

The build folder is ready to be deployed.
You may serve it with a static server:

  yarn global add serve
  serve -s build

Find out more about deployment here:

  https://cra.link/deployment

✨  Done in 14.24s.

[danielmatthew]

Narrowed it down to here:

bootstrap/scss/_grid.scss

Lines 5 to 13 in 60d3eb3

	@if $enable-grid-classes {
	.row {
	@include make-row();
	> * {
	@include make-col-ready();
	}
	}
	}

… from where it appears to be @include make-row();

[kris2kris]

Narrowed it down to here:

bootstrap/scss/_grid.scss

Lines 5 to 13 in 60d3eb3

	@if $enable-grid-classes {
	.row {
	@include make-row();
	> * {
	@include make-col-ready();
	}
	}
	}

Hello,

I have created a ticket in sass (I don't know if it is correct) because I have identified the problem
sass/dart-sass#1496

[danielmatthew]

Great work @kris2kris !

[danielmatthew]

Per @kris2kris, this is the multiplication which Sass is balking at now:

bootstrap/scss/mixins/_grid.scss

Lines 10 to 12 in 60d3eb3

	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

From the release notes for 1.40.0

calc() expressions will be parsed more thoroughly, and errors will be highlighted where they weren't before. This may break your stylesheets, but only if they were already producing broken CSS.

[danielmatthew]

I think what makes this gnarlier to suss out is that a basic set-up compiles with no errors thrown:

{
  "name": "bootstrap-test",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "start": "npx sass style.scss style.css --load-path=node_modules"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "sass": "1.42.0"
  },
  "dependencies": {
    "bootstrap": "5.1.1"
  }
}

// style.scss
@import "bootstrap/scss/bootstrap";

[heydarm]

Still researching, but it could be because of sass-loader that create-react-app uses

[kris2kris]

It seems like SASS fixed it in the latest version (1.42.0)
Checked locally, it really works now

For me it does not work with 1.42.0, 1.39.2 is the last version I can use.

[Nzamuyejoram]

@kris2kris so great . nice for the success

[baijifeilong]

Uninstall sass, install node-sass.

[kris2kris]

Uninstall sass, install node-sass.

On the GitHub page of node-sass it's written than node-sass is deprecated and to use dart-sass instead

[XhmikosR]

This is an issue with postcss-values-parser, see shellscape/postcss-values-parser#138.

We have a #35033 which is supposed to work around the issue.