Unable to modify $utilities map after loading Bootstrap v6-dev modules #42274

baderpaul · 2026-04-04T15:35:29Z

baderpaul
Apr 4, 2026

I am a TYPO3 developer from Germany and would like to use Bootstrap 6 in the future for site packages, similar to how it is used in WordPress.
First of all, I really like the ideas behind the new version and have been experimenting with Bootstrap v6 since last year.
Environment:

Bootstrap: v6.0.0-dev (from v6-dev branch)
Sass: Dart Sass 1.95.0
Build tool: npm

I am currently testing how the utilities can best be customized and overridden individually.

My Sass file to be compiled currently looks like this:

I tested it with from your example from

https://v6-dev--twbs-bootstrap.netlify.app/docs/6.0/utilities/api/#modify-utilities

//@use "sass:map";
@use "../../Public/Contrib/bootstrap/scss/banner";

// scss-docs-start import-stack
//@use "../../Public/Contrib/bootstrap/scss/colors";
//@use "Custom/c-colors";
//@use "Custom/c-theme";

// Global CSS variables, layer definitions, and configuration
@use "../../Public/Contrib/bootstrap/scss/root";

// Subdir imports
@use "../../Public/Contrib/bootstrap/scss/content";
@use "../../Public/Contrib/bootstrap/scss/layout" ;
@use "../../Public/Contrib/bootstrap/scss/forms";
@use "../../Public/Contrib/bootstrap/scss/buttons";

// Components
@use "../../Public/Contrib/bootstrap/scss/accordion";
@use "../../Public/Contrib/bootstrap/scss/alert";
@use "../../Public/Contrib/bootstrap/scss/avatar";
@use "../../Public/Contrib/bootstrap/scss/badge";
@use "../../Public/Contrib/bootstrap/scss/breadcrumb";
@use "../../Public/Contrib/bootstrap/scss/chip";
@use "../../Public/Contrib/bootstrap/scss/card";
@use "../../Public/Contrib/bootstrap/scss/carousel";
@use "../../Public/Contrib/bootstrap/scss/datepicker";
@use "../../Public/Contrib/bootstrap/scss/dialog";
@use "../../Public/Contrib/bootstrap/scss/drawer";
@use "../../Public/Contrib/bootstrap/scss/menu";
@use "../../Public/Contrib/bootstrap/scss/list-group";
@use "../../Public/Contrib/bootstrap/scss/nav";
@use "../../Public/Contrib/bootstrap/scss/nav-overflow";
@use "../../Public/Contrib/bootstrap/scss/navbar";
@use "../../Public/Contrib/bootstrap/scss/pagination";
@use "../../Public/Contrib/bootstrap/scss/placeholder";
@use "../../Public/Contrib/bootstrap/scss/popover";
@use "../../Public/Contrib/bootstrap/scss/progress";
@use "../../Public/Contrib/bootstrap/scss/spinner";
@use "../../Public/Contrib/bootstrap/scss/stepper";
@use "../../Public/Contrib/bootstrap/scss/toasts";
@use "../../Public/Contrib/bootstrap/scss/tooltip";
@use "../../Public/Contrib/bootstrap/scss/transitions";

// Helpers
@use "../../Public/Contrib/bootstrap/scss/helpers";

// Custom

$utilities: map.merge(
  $utilities,
  (
    "border": map.merge(
      map.get($utilities, "border"),
      ( responsive: true ),
    ),
  )
);

// Utilities
@use "../../Public/Contrib/bootstrap/scss/utilities/api";
// scss-docs-end import-stack

After compilation
i get an error like that:

baderp@baderps-MBP setup_package % ddev npm run build

setup_package@1.0.0 build
sass Resources/Private/Scss/StyleSheet.scss:Resources/Public/Styles/StyleSheet.css && sass --style=compressed Resources/Private/Scss/StyleSheet.scss:Resources/Public/Styles/StyleSheet.min.css

Error: There is no module with the namespace "map".
╷
50 │ $utilities: map.merge(
│ ┌─────────────^
51 │ │ $utilities,
52 │ │ (
53 │ │ "border": map.merge(
54 │ │ map.get($utilities, "border"),
55 │ │ ( responsive: true ),
56 │ │ ),
57 │ │ )
58 │ │ );
│ └─^
╵
Resources/Private/Scss/StyleSheet.scss 50:13 root stylesheet

After compilation with
@use "sass:map";
i get an error like that:

baderp@baderps-MBP setup_package % ddev npm run build

setup_package@1.0.0 build
sass Resources/Private/Scss/StyleSheet.scss:Resources/Public/Styles/StyleSheet.css && sass --style=compressed Resources/Private/Scss/StyleSheet.scss:Resources/Public/Styles/StyleSheet.min.css

Error: Undefined variable.
╷
51 │ $utilities,
│ ^^^^^^^^^^
╵
Resources/Private/Scss/StyleSheet.scss 51:3 root stylesheet
Failed to run npm run build: exit status 65

Sorry for that, but I have no idea what I am doing wrong or what I have misunderstood.

Maybe you have a tip for me?

Thxx for your work
Best regards,
Paul Bader

Answered by baderpaul

Apr 9, 2026

This will work for me, but i'am not sure is this OK! Or i can do someting better?
Thxx

// --- Custom Vars ------------------------------------------------------
$project-spacer: (
    0: 0,
    1: 1rem * .0625,
    2: 1rem * .125,
    3: 1rem * .1875,
    4: 1rem * .25,
    5: 1rem * .3125,
    6: 1rem * .375,
    7: 1rem * .4375,
    8: 1rem * .5,
    9: 1rem * .5625,
    10: 1rem * .625,
    12: 1rem * .75,
    13: 1rem * .8125,
    15: 1rem * .9375,
    16: 1rem,
    18: 1rem * 1.125,
    20: 1rem * 1.25,
    24: 1rem * 1.5,
    25: 1rem * 1.5625,
    30: 1rem * 1.875,
    35: 1rem * 2.1875,
    36: 1rem * 2.25,
    40: 1rem * 2.5,
    45: 1rem * 2.8125,
    50: 1rem * 3.125,
    60: 1…

View full answer

baderpaul · 2026-04-09T08:33:54Z

baderpaul
Apr 9, 2026
Author

This will work for me, but i'am not sure is this OK! Or i can do someting better?
Thxx

// --- Custom Vars ------------------------------------------------------
$project-spacer: (
    0: 0,
    1: 1rem * .0625,
    2: 1rem * .125,
    3: 1rem * .1875,
    4: 1rem * .25,
    5: 1rem * .3125,
    6: 1rem * .375,
    7: 1rem * .4375,
    8: 1rem * .5,
    9: 1rem * .5625,
    10: 1rem * .625,
    12: 1rem * .75,
    13: 1rem * .8125,
    15: 1rem * .9375,
    16: 1rem,
    18: 1rem * 1.125,
    20: 1rem * 1.25,
    24: 1rem * 1.5,
    25: 1rem * 1.5625,
    30: 1rem * 1.875,
    35: 1rem * 2.1875,
    36: 1rem * 2.25,
    40: 1rem * 2.5,
    45: 1rem * 2.8125,
    50: 1rem * 3.125,
    60: 1rem * 3.75,
    70: 1rem * 4.375,
    80: 1rem * 5,
   100: 1rem * 6.25,
   200: 1rem * 12.5,
);

$project-gaps: (
    0: 0,
    5: 0.3125rem,
    10: 0.625rem,
    15: 0.9375rem,
    20: 1.25rem,
    25: 1.5625rem,
    30: 1.875rem,
);
// --- New Colors ------------------------------------------------------
  $gold: oklch(0.4662 0.0915 77.26);
  $silver: oklch(0.8078 0 0) ;

@use "../../Public/Contrib/bootstrap/scss/config" with (

  $spacer: 1rem,      
  $spacers: $project-spacer, 
  $gutters: $project-spacer, 
  $grid-gutter-x: 1.5rem,    
  $grid-gutter-y: 0     
);

// --- Custom Colors ------------------------------------------------------

@use "../../Public/Contrib/bootstrap/scss/colors" with (

  $colors: (
  "gold": $gold,
  "silver": $silver,
  "indigo": null,
  "violet": null,
  "purple": null,
  "pink": null,
  "amber": null,
  "lime": null,
  "teal": null,
  "cyan": null,
  "pewter": null,
  ),
);

// --- functions ------------------------------------------------------
@use "../../Public/Contrib/bootstrap/scss/functions" as *;

// --- Custom root ------------------------------------------------------
@use "../../Public/Contrib/bootstrap/scss/root" with (
  $root-tokens: (
    --grid-gutter-width: .625rem,
    --spacer: 1rem
  )
);


// Global CSS variables, layer definitions, and configuration


// Subdir imports
@use "../../Public/Contrib/bootstrap/scss/content";
@use "../../Public/Contrib/bootstrap/scss/layout";
@use "../../Public/Contrib/bootstrap/scss/forms";
@use "../../Public/Contrib/bootstrap/scss/buttons";

// Components
@use "../../Public/Contrib/bootstrap/scss/accordion";
@use "../../Public/Contrib/bootstrap/scss/alert";
@use "../../Public/Contrib/bootstrap/scss/avatar";
@use "../../Public/Contrib/bootstrap/scss/badge";
@use "../../Public/Contrib/bootstrap/scss/breadcrumb";
@use "../../Public/Contrib/bootstrap/scss/chip";
@use "../../Public/Contrib/bootstrap/scss/card";
@use "../../Public/Contrib/bootstrap/scss/carousel";
@use "../../Public/Contrib/bootstrap/scss/datepicker";
@use "../../Public/Contrib/bootstrap/scss/dialog";
@use "../../Public/Contrib/bootstrap/scss/drawer";
@use "../../Public/Contrib/bootstrap/scss/menu";
@use "../../Public/Contrib/bootstrap/scss/list-group";
@use "../../Public/Contrib/bootstrap/scss/nav";
@use "../../Public/Contrib/bootstrap/scss/nav-overflow";
@use "../../Public/Contrib/bootstrap/scss/navbar";
@use "../../Public/Contrib/bootstrap/scss/pagination";
@use "../../Public/Contrib/bootstrap/scss/placeholder";
@use "../../Public/Contrib/bootstrap/scss/popover";
@use "../../Public/Contrib/bootstrap/scss/progress";
@use "../../Public/Contrib/bootstrap/scss/spinner";
@use "../../Public/Contrib/bootstrap/scss/stepper";
@use "../../Public/Contrib/bootstrap/scss/toasts";
@use "../../Public/Contrib/bootstrap/scss/tooltip";
@use "../../Public/Contrib/bootstrap/scss/transitions";

// Helpers
@use "../../Public/Contrib/bootstrap/scss/helpers";


// --- Custom Utilities ---------------------------------------------------

$project-utilities: (
  "border": (
      responsive: true,
      class: border,
      property: border,
      values: (
        null: var(--border-width) var(--border-style) var(--border-color),
        0: 0,
      )
    ),
    "border-top": (
      responsive: true,
      class: border-top,
      property: border-block-start,
      values: (
        null: var(--border-width) var(--border-style) var(--border-color),
        0: 0,
      )
    ),
    "border-end": (
      responsive: true,
      property: border-inline-end,
      class: border-end,
      values: (
        null: var(--border-width) var(--border-style) var(--border-color),
        0: 0,
      )
    ),
    "border-bottom": (
      responsive: true,
      property: border-block-end,
      class: border-bottom,
      values: (
        null: var(--border-width) var(--border-style) var(--border-color),
        0: 0,
      )
    ),
    "border-start": (
      responsive: true,
      property: border-inline-start,
      class: border-start,
      values: (
        null: var(--border-width) var(--border-style) var(--border-color),
        0: 0,
      )
    ),
    "border-y": (
      responsive: true,
      property: border-block,
      values: (
        null: var(--border-width) var(--border-style) var(--border-color),
        0: 0,
      )
    ),
    "border-x": (
      responsive: true,
      property: border-inline,
      values: (
        null: var(--border-width) var(--border-style) var(--border-color),
        0: 0,
      )
    ),
    "cursor": (
      property: cursor,
      class: cursor,
      values: auto pointer grab,
    ),
    "gap": (
      responsive: true,
      property: gap,
      class: gap,
      values: $project-gaps,
    ),
    "row-gap": (
      responsive: true,
      property: row-gap,
      class: row-gap,
      values: $project-gaps,
    ),
    "column-gap": (
      responsive: true,
      property: column-gap,
      class: column-gap,
      values: $project-gaps,
    ),
);

@use "../../Public/Contrib/bootstrap/scss/utilities" with (
  $utilities: $project-utilities
);

@use "../../Public/Contrib/bootstrap/scss/utilities/api";

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Bootstrap

Unable to modify $utilities map after loading Bootstrap v6-dev modules #42274

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Bootstrap

Unable to modify $utilities map after loading Bootstrap v6-dev modules #42274

Uh oh!

baderpaul Apr 4, 2026

Replies: 1 comment

Uh oh!

baderpaul Apr 9, 2026 Author

baderpaul
Apr 4, 2026

baderpaul
Apr 9, 2026
Author