Undefined mixin: _assert-ascending error found in node_modules\bootstrap\scss\_variables.scss

[cmllbose]

I'm getting this error after I migrate the bootstrap to latest version (5.3) and replace node-sass to sass.

Error:

ERROR in ./src/styles/main.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[6].use[3]!./src/styles/main.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined mixin.
    ╷
494 │ @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  node_modules\bootstrap\scss\_variables.scss 494:1  @use
  src\styles\main.scss 7:1                           root stylesheet
 @ ./src/styles/main.scss 8:6-219 20:17-24 24:0-189 24:0-189 25:22-29 25:33-47 25:50-64
 @ ./src/index.jsx 14:0-28

I'm using these libs and versions:

"bootstrap": "5.3.3"
"sass": "1.62.1"
"sass-loader": "13.3.3"

Here's my main.scss:

@use 'bootstrap/scss/functions';
@use 'bootstrap/scss/variables';
@use 'bootstrap/scss/mixins';
@use 'bootstrap/scss/bootstrap'
@use 'custom-variables';  
...

custom-variables.scss: // I also tried to add variables before the include

@include _assert-ascending($grid-breakpoints, '$grid-breakpoints');
@include _assert-starts-at-zero($grid-breakpoints, '$grid-breakpoints');
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

@include _assert-ascending($container-max-widths, '$container-max-widths');
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px
) !

webpack config:

{
     test: /(\.scss|\.sass)$/,
     use: [
        'style-loader',
        'css-loader',
        {
            loader: 'postcss-loader',
            options: {
              postcssOptions: { plugins: [require('autoprefixer')] },
              sourceMap: true
            }
        },
        {
          loader: 'sass-loader',
          options: {
              sourceMap: true,
              implementation: require('sass')
          }
        }
     ]
},

What I've tried so far:

• Change the import to use (vice-versa)
• Remove the underscore in _assert-ascending
• Import the function, mixins, variables from bootstrap to custom-variables.scss
• Play with the lib versions
• I even tried removing my custom variables to see where the error was coming from, and it seems the problem lies within Bootstrap or there might be an issue with my Sass compiler (I'm not entirely sure).

Please help. I'm already questioning my life choices.

Thanks in advance.

[julien-deramond]

Hello there.
I've tried to replicate a part of your environment locally with different build tools. In terms of pure Sass and usage of Bootstrap, and handling only $grid-breakpoints override, you can do that for instance:

// Your main Sass file

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here
@import "./custom-variables";

// 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";

// 4. import the rest of Bootstrap depending on your needs

// custom-variables.scss

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px
) !default;

// The following 2 lines can be removed as it's already done by _variables.scss
// But calling the mixins here actually works; you can for instance change the `xs: 0` to `xs: 12px` and see warnings in the console
@include _assert-ascending($grid-breakpoints, '$grid-breakpoints'); 
@include _assert-starts-at-zero($grid-breakpoints, '$grid-breakpoints');

Or you could get rid of custom-variables.scss and copy its content directly into your main Sass file, replacing the @import "./custom-variables";.

IMHO, you should stick to using @import and @include instead of @use that is not officially supported.

Hope it can be helpful to find where the exact problem comes from. If it's still not working, you could try to create a reproducible StackBlitz project, starting from https://github.com/twbs/examples/tree/main/sass-js (by clicking on the "Open in StackBlitz" button in the README).

[cmllbose]

This solution works! Thank you so much!