Bootstrap5.3 | react js 18 | SCSS overwrite _variables | [postcss] [sass] Undefined mixin

Question

Hi i want to overwrite bs5 variables, i copied bs5 default variables file from this link https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss

when i pasted this code in my custom file i got the error defined in below screeshot

my App.scss file look like below

    @font-face {
  font-family: Montserrat;
  src: url(../public/fonts/Montserrat/Montserrat-VariableFont_wght.ttf) format('truetype');
}

.wrapper{
  padding-right:0px !important;
  padding-left: 0px !important;
}
.wrapper {
  .row-wrapper{
    margin-left: 0px !important;
    margin-right: 0px !important;
  }
}
.text-xs {
  font-size: .7rem;
}
@import url('./_variables.scss');
@import url('./Header.scss');
@import url('./Sidebar.scss');
@import url('./Dashboard.scss');
@import '../../node_modules/bootstrap/scss/bootstrap';

looking forward to anyone resolve this issue, thanks.

Answer 1

This is expected: you are using a mixin that you did not import before usage.

First thing is that you don't need - and should not - copy the variables source. You should @use the Bootstrap module like any other SASS module, and configure it like any SASS module that supports configuration.

Typically, would you want to replace the $white variable, you would do:

@use "./node_modules/bootstrap/scss/bootstrap" with (
  $white: black
);

I strongly recommend that you read the documentation of SASS before going further. You use @import that is deprecated, and you seem to not quite understand how SASS works and what a SASS module is.

This documentation especially: https://sass-lang.com/documentation/variables/#configuring-modules

But really, the whole documentation. You are using @import which is deprecated in favor of @use so I suspect you need some update on how SASS evolved this last 10 years.

Edit: Here is the link to the official SASS documentation that recommends not using @import anymore: https://sass-lang.com/documentation/at-rules/import/