Encountered a 'Expected identifier' error while attempting to include utilities using Bootstrap 5

I decided to enhance the look of my website by adding a new background color class. I consulted Bootstrap documentation to guide me through the process and here's what I came up with:

@import "./BOOTSTRAP-CSS/scss/functions";
@import "./BOOTSTRAP-CSS/scss/variables";
@import "./BOOTSTRAP-CSS/scss/variables-dark";
@import "./BOOTSTRAP-CSS/scss/maps";
@import "./BOOTSTRAP-CSS/scss/mixins";
@import "./BOOTSTRAP-CSS/scss/utilities";

$third: #226C77;

$utilities: map-merge(
    $utilities, 
    (
        "bg-third": (
            property: background-color,
            class: bg-third,
            values: $third
        )
));

@import "./BOOTSTRAP-CSS/scss/bootstrap.scss";
@import "bootstrap/scss/utilities/api";

However, upon implementing this, I encountered an error:

Error: Expected identifier.
  ┌──> static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\mixins\_utilities.scss
67│         .#{$property-class + $infix + $property-class-modifier} {
  │            ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 
  ╵
  ╷
1 │ .bg-third-#226C77
  │            ━ error in interpolated output
  ╵
  static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\mixins\_utilities.scss 67:12   generate-utility()
  static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\utilities\_api.scss 13:9       @content
  static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\mixins\_breakpoints.scss 68:5  media-breakpoint-up()
  static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\utilities\_api.scss 5:3        @import
  static\CUSTOM\SCSS\BOOTSTRAP-CSS\scss\bootstrap.scss 51:9            @import
  static\CUSTOM\SCSS\_new_utilities.scss 20:9                          @import
  static\CUSTOM\SCSS\custom.scss 7:9                                   root stylesheet

I attempted to resolve this issue by rearranging the imports at the end of the file, but to no avail.

Can anyone provide insight on how to fix this error?

csssassbootstrap-5

Answer №1

According to the documentation, the list of values is added before the class name, resulting in:

.bg-third-#226C77

which is considered invalid.

To resolve this issue, you have two options. You can either utilize a map with a null key to prevent the addition:

values: (null:$third)

This will output:

.bg-third { ... }

Alternatively, you can specify a custom key:

values: (teal:$third)

resulting in:

.bg-third-teal { ... }

If you choose to use the null key, your full code should look like this:

@import "./BOOTSTRAP-CSS/scss/functions";
@import "./BOOTSTRAP-CSS/scss/variables";
@import "./BOOTSTRAP-CSS/scss/variables-dark";
@import "./BOOTSTRAP-CSS/scss/maps";
@import "./BOOTSTRAP-CSS/scss/mixins";
@import "./BOOTSTRAP-CSS/scss/utilities";

$third: #226C77;

$utilities: map-merge(
    $utilities, 
    (
        "bg-third": (
            property: background-color,
            class: bg-third,
            values: (null:$third)
        )
));

@import "./BOOTSTRAP-CSS/scss/bootstrap.scss";
@import "bootstrap/scss/utilities/api";

and the result will be:

.bg-third{background-color:#226c77 !important}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How do I get rid of the form border and shadow on my WordPress login page?

Currently revamping the appearance of the Wordpress login page and most aspects are coming together smoothly. I opted to utilize a separate css file for this project, which has been effective overall. However, one issue persists. I've encountered diff ...

csswordpresswordpress-themingshadow

Error message in JS and HTML is totally bizarre

My expertise in JavaScript is very limited, so the terms I use might not be entirely accurate. However, I'll do my best to explain the issue at hand. I'm facing a peculiar problem... I've been attempting to modify someone else's JS scr ...

javascriptjqueryhtmlcssapi

Is there a way to change the color of the menu button to white if the points are not visible?

I have created CSS to style the menu's color and make the buttons change color based on different actions. However, I also want the buttons to match the colors of the points on the map. To achieve this, I set the background color in JavaScript when ge ...

javascripthtmlcss

Decrease the length of the bottom border

https://i.sstatic.net/mvNHu.pngHey there, I'm wondering if it's possible to decrease the length of a border bottom in CSS. I currently have a div with a border-bottom: 2px style applied to it, but I want to make it shorter. Is this achievable? ht ...

htmlcss

Paginating: Restrict the page number for smaller screens

When viewing on a small screen device (> 641 px), my pagination should resemble https://i.sstatic.net/dSSUX.png Conversely, on screens that are medium-sized and larger (< 641 px), the pagination should appear as shown here: https://i.sstatic.net/C1E ...

jqueryhtmlcssjquery-pagination

Utilizing variable values in HTML and CSS to enhance a website's functionality

My current project involves modifying an HTML web resource for use in Dynamics 365. I need to replace a static URL with a dynamic value obtained via Javascript, specifically: var URL = Xrm.Page.context.getClientUrl(); There are multiple instances within ...

javascripthtmlcssmicrosoft-dynamics

Forming a space between borders

I'm attempting to create a space within a div's border that can accommodate an image, much like so: Is there a method to achieve this using only CSS? The only solution I have found is: .box { background: url(img.png) bottom left; border ...

cssimageborder

Select and emphasize specific sections of text

Can I create an input element that looks like the one in my screenshot? I want to be able to change the value with JavaScript and highlight text by wrapping it with '*' and giving it a different color. Thank you for any assistance. ...

javascriptcssasp.nethtml

What could be causing the issue of nth-child blocking the functionality of a:hover styles?

I have a unique collection of images that are styled to resemble polaroid pictures. Each image is given a slight rotation. a.polaroid { transform: rotate(-2deg); } On hover, a scale transformation is applied. a.polaroid:hover { transform: scale(1 ...

csstransform

Creating a responsive Bootstrap 5 carousel with multiple items

Is there a way to modify the Bootstrap 5 carousel to display approximately 3 items (cards) per slide on desktop/laptop screens, but only 1 item on smaller devices (768px or less)? Currently, the items are stacking on top of each other instead of appearing ...

htmlcsscarouselbootstrap-5

Hiding and securing a div element when JavaScript is disabled

My form includes a <div>. This particular <div> is a red circle. Even when JavaScript is disabled, it remains visible (I can use display: none to address this). The issue arises when I re-enable JS - upon user interaction, the <div> mov ...

javascriptjqueryhtmlcss

Creating a Radial/Pie Menu using CSS3: A Step-by-Step Guide

I am interested in creating a radial menu using CSS3 transforms animations, similar to the example shown on this Wikipedia page or the flash version demonstrated on this website. Although there is a jQuery implementation available using canvas called Radme ...

jquerycsscontextmenuradial

"Utilize Bootstrap 4 to align text in the center and expand the text area for a

Currently experiencing some challenges with Bootstrap 4: Need to center the inline input fields Insert space between the inputs Add a large textarea below the input fields This is the current layout: Here is the HTML code: body { background: url(h ...

htmlcsswebbootstrap-4

What could be the reason my dropdown menu is not appearing on hover?

Currently, I am in the process of developing a menu using angularJS and google app script within a dialog box. I have been referring to this sample code for guidance. Instead of pasting all my code here, I can summarize what I have come up with: var a ...

javascripthtmlcssangularjsgoogle-apps-script

What could be causing the "keyframes method" in my css to not function correctly?

When working on the keyframes section, my computer seems to be having trouble recognizing the from part. Ideally, it should display in blue with the opacity command appearing in grey. Unfortunately, neither of these styles are appearing correctly and I&apo ...

javascripthtmlcsscss-animations

CSS/React JS: I wish for the input fields to maintain focus even after entering values

I'm working with a confirmation code that is made up of 6 digits. I've noticed that when I click on an input field, it becomes focused and underlined in blue. However, as soon as I start typing in the next input field, the blue underline disappe ...

cssreactjs

Tips and instructions for assisting IE6

What are some important tips and guidelines to consider when designing websites that need to be compatible with Internet Explorer 6? I'm not interested in a detailed list of known bugs. I want general advice on preferred elements for certain tasks, f ...

htmlcssinternet-explorer-6

Is there a way to programmatically update a webpage using Javascript?

I have been attempting to set up the code in a way that the page automatically changes using setTimeout. However, I am unable to make it work. setTimeout()(page3, 500); function page3() { changepage3('automatic') } Even though my code is str ...

javascriptjqueryhtmlcsssettimeout

Is there a way for me to discover the identity of the victor?

There are 4 divs that move at different, random speeds each time. I am trying to determine which one is the fastest or reaches the goal first. Additionally, there is a betting box where you can choose a horse to bet on. I need to compare the winner with my ...

javascripthtmlcss

How can you assign a strokeStyle color to a Canvas using a CSS property?

Our team is currently working on an Angular2 / Ionic 2 project where we have implemented a HTML Canvas element that allows users to draw on it. One challenge we are facing is how to set the Canvas strokeStyle property using a color provided by a CSS style. ...

javascripthtmlcssangularcanvas