Search code examples
csssassbootstrap-5dart-sass

How to use @use in Bootstrap v5 instead of @import for customization

I'm trying to use @use instead of @import to import all the variables in my _custom.scss partial to styles.scss sass file. But @use is not overriding the variables as i intendent. How to solve?

_custom.scss

 
$primary: #ff00f2;
$secondary: #bb6ef5;

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

styles.scss 

@import 'custom';

Solution

  • Add all the variables inside the with by using the @use as shown below

    _custom.scss 

    @use "../node_modules/bootstrap/scss/bootstrap.scss" with (
$primary: 'your color';
$secondary: 'your color';
);

    styles.scss

    @use 'custom'