How to add a utility class in Bootstrap?

Question

Following the docs here in Bootstrap v5, I'm trying to add a cursor utility class using scss. I have _utilities.scss loaded first and then I have this (as per the docs):

@import "bootstrap/scss/utilities";

    $utilities: map-merge(
      $utilities,
      (
        "cursor": (
          property: cursor,
          class: cursor,
          responsive: true,
          values: auto pointer grab,
        )
      )
    );

I'm then adding this class to my element:

<a href="#" class="cursor-grab">Grab this</a>

However, the cursor-grab class is nowhere to be found in the CSS output. Any idea what I'm doing wrong?

From what I understand from in the docs, when using map-merge to add a utility, it starts with the class name and then the value with a dash between. Like this: https://d.pr/i/cNJ71e — adro21, Dec 21 '20 at 01:25
Just to be sure, you've re-compiled the SCSS after adding the above snippet, correct? SCSS compiles to standard `.css` files, so changes to the SCSS source won't automatically reflect. — esqew, Dec 21 '20 at 01:31
Yes, I've re-compiled the file and looking at my output .css file for the new class, but it is not there. (there were also no errors in the output console) — adro21, Dec 21 '20 at 01:34

Carol Skelly · Answer 1 · 2020-12-21T02:17:50.843

0

I've answered a similar question. The @import "bootstrap" needs to follow the changes. The utilities file requires the variables file, and the variables file requires the functions file, so you must @import all 3 before the change:

@import "functions";
@import "variables";
@import "utilities";
    
    $utilities: map-merge(
      $utilities,
      (
        "cursor": (
          property: cursor,
          class: cursor,
          responsive: true,
          values: auto pointer grab,
        )
      )
    );

@import "bootstrap";

Demo

Bootstrap 5 is still in beta. Follow this issue report to mark progress.

edited Dec 21 '20 at 02:17

answered Dec 21 '20 at 02:10

Carol Skelly

351,302
90
710
624

Hmmm I'm confused, this seems like a bug. I very intentionally don't want to have to import the entire bootstrap scss file. I'm importing all the parts separately. But I have functions, variables and utilties first, then the utilities map merge next and then all the other parts after. This should still be possible without me having to import the entire bootstrap scss file right? – adro21 Dec 21 '20 at 02:19
You don't have to import all of bootstrap first. You only need to import the vars/files that are being referenced. This hasn't changed since 3.x. On your GH comment you're missing a trailing comma which is another bug I reported. – Carol Skelly Dec 21 '20 at 02:22
Yes, except it doesn't actually work if you don't import the entire bootstrap.scss file (which I don't want to do for optimization purposes). See the follow up on this thread here: https://github.com/twbs/bootstrap/issues/32557 ... I'm importing all the parts after eccept for functions, variables, mixins and utlities, which I'm importing first – adro21 Dec 21 '20 at 02:41
It does work. Even when just importing the utils after: https://codeply.com/p/m14Nzv3jVX Make sure bootstrap.css isn't being referenced following your SASS files. – Carol Skelly Dec 21 '20 at 02:43
See my latest comment on the github Bootstrap issues. It only works if bootstrap-grid is imported BEFORE I try to add the utility class. That doesn't really make sense to me. My output file is being referenced correctly and everything else in Bootstrap is working fine. – adro21 Dec 21 '20 at 03:04
Again, I've already answered your original question. – Carol Skelly Dec 21 '20 at 13:06

How to add a utility class in Bootstrap?

1 Answers1