CODEWITHSUNDEEP
sassreact-tsxsass-loader
Dilyan Galabov
Dilyan Galabov

Reputation: 71

Undefined @mixin after updating sass-loader and sass to the latest versions in React TS

I have the following issue when running command npm run build in my React TS app

ERROR in ./src/main/webapp/app/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
Undefined mixin.
    ╷
494 │ @include _assert-ascending($grid-breakpoints, "$grid-breakpoints");

And this issue is triggered after I apply the new versions of sass and sass-loader which are:

  1. "sass": "1.82.0",
  2. "sass-loader": "16.0.4"
  3. Currently using bootstrap - 5.3.3

After i apply the new changes which are required for sass i got the error above.

It happens inside this .scss file:

// Import Bootstrap source files from node_modules
@use './scss/' as *;
// Override Bootstrap variables
@use 'bootstrap-variables';
@use './scss/abstracts/variables';
@use '~bootstrap/scss/functions';
@use '~bootstrap/scss/variables';
@use '~bootstrap/scss/bootstrap';
@use 'scss/color-themes';

body {
  @include color-themes.themed() {
    background-color: fromTheme(main-background-page-color);
  }
  margin: 0;
}

@mixin pad($size, $side) {
  @if $size== '' {
    @if $side== '' {
      .pad {
        padding: 10px !important;
      }
    } @else {
      .pad {
        padding-#{$side}: 10px !important;
      }
    }
  } @else {
    @if $side== '' {
      .pad-#{$size} {
        padding: #{$size}px !important;
      }
    } @else {
      .pad-#{$side}-#{$size} {
        padding-#{$side}: #{$size}px !important;
      }
    }
  }
}

@include pad('', '');
@include pad('2', '');
@include pad('3', '');
@include pad('5', '');
@include pad('10', '');
@include pad('20', '');
@include pad('25', '');
@include pad('30', '');
@include pad('50', '');
@include pad('75', '');
@include pad('100', '');
@include pad('4', 'top');
@include pad('5', 'top');
@include pad('10', 'top');
@include pad('20', 'top');
@include pad('25', 'top');
@include pad('30', 'top');
@include pad('50', 'top');
@include pad('75', 'top');
@include pad('100', 'top');
@include pad('4', 'bottom');
@include pad('5', 'bottom');
@include pad('10', 'bottom');
@include pad('20', 'bottom');
@include pad('25', 'bottom');
@include pad('30', 'bottom');
@include pad('50', 'bottom');
@include pad('75', 'bottom');
@include pad('100', 'bottom');
@include pad('5', 'right');
@include pad('10', 'right');
@include pad('20', 'right');
@include pad('25', 'right');
@include pad('30', 'right');
@include pad('50', 'right');
@include pad('75', 'right');
@include pad('100', 'right');
@include pad('5', 'left');
@include pad('10', 'left');
@include pad('20', 'left');
@include pad('25', 'left');
@include pad('30', 'left');
@include pad('50', 'left');
@include pad('75', 'left');
@include pad('100', 'left');

@mixin no-padding($side) {
  @if $side== 'all' {
    .no-padding {
      padding: 0 !important;
    }
  } @else {
    .no-padding-#{$side} {
      padding-#{$side}: 0 !important;
    }
  }
}

@include no-padding('left');
@include no-padding('right');
@include no-padding('top');
@include no-padding('bottom');
@include no-padding('all');

Also I will provide my webpack.config.js for more information if you need:

module: {
      rules: [
        {
          test: /\.(sa|sc|c)ss$/,
          use: [
            'style-loader',
            {
              loader: 'css-loader',
              options: { url: false },
            },
            {
              loader: 'postcss-loader',
            },
            {
              loader: 'sass-loader',
              options: {
                implementation: require('sass'), // Ensure Dart-Sass is being used
                sassOptions: {
                  api: 'modern-compiler', 
                },
              },
            },
          ],
        },
      ],
    },

And I do not know why this issue is causing.

EDIT:

Also take a look for this file used inside the main app.scss(used to override the defaults $grid-breakpoints from the variables.scss bootstrap) file which is ' @use './scss/abstracts/variables' :

$xxs-breakpoint: 0;
$xs-breakpoint: 1100px;
$sm-breakpoint: 1366px;
$md-breakpoint: 1536px;
$lg-breakpoint: 1920px;
$xl-breakpoint: 2560px;
$xxl-breakpoint: 3840px;

$grid-breakpoints: (
  xxs: $xxs-breakpoint,
  xs: $xs-breakpoint,
  sm: $sm-breakpoint,
  md: $md-breakpoint,
  lg: $lg-breakpoint,
  xl: $xl-breakpoint,
  xxl: $xxl-breakpoint,
);

If i change the @use with @import seems to be workable, but why this is happened because afterwards i have warnings like this one. And of course i do not want to have this as well.

Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0.

More info and automated migrator: https://sass-lang.com/d/import

6 | @import 'bootstrap-variables';


@import './scss/abstracts/variables';
@import '~bootstrap/scss/functions';
@import 'bootstrap-variables';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/bootstrap';

Upvotes: 0

Views: 246

Answers (1)

Alex Hurtado
Alex Hurtado

Reputation: 1

Try importing _functions.scss before _variables.scss. Try something like this:

    // Import Bootstrap 5.3 (core)
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";

This should solve your issue. Please use your own path to node_modules folder.

Your final code should look like this:

// Import Bootstrap source files from node_modules
@use './scss/' as *;
// Override Bootstrap variables
@use '~bootstrap/scss/functions';
@use 'bootstrap-variables';
@use '~bootstrap/scss/variables';
@use '~bootstrap/scss/bootstrap';
@use 'scss/color-themes';

The rest of your code.

Upvotes: 0

Related Questions