There was a problem compiling bootstrap.scss due to an error found in _root.scss

I've encountered an issue while compiling my bootstrap sass file. The error message I'm receiving is shown below. Although I can make it work by commenting out lines 4 and 8 of _root.scss, that is not the optimal solution. Can someone please explain what is causing this problem? - My Sass version is up-to-date at 3.5.3

Error: Invalid CSS after "...lor}: #{$value}": expected "{", was ";"
        on line 4 of /Users/.../bootstrap-4.0.0/scss/_root.scss
  ...

1: :root {
2:   // Custom variable values only support SassScript inside `#{}`.
3:   @each $color, $value in $colors {
4:     --#{$color}: #{$value};
5:   }
6: 
7:   @each $color, $value in $theme-colors {
8:     --#{$color}: #{$value};
9:   }
csssassbootstrap-4

Answer №1

It seems like an issue with the SASS compiler itself. Here are some related problems you might find interesting:

Give this a shot:

1: :root {
2:   // Custom variables only support SassScript inside `#{}`.
3:   @each $color, $value in $colors {
4:     --color-#{$color}: #{$value};
5:   }
6: 
7:   @each $color, $value in $theme-colors {
8:     --color-#{$color}: #{$value};
9:   }

Answer №2

If you aren't concerned about potentially losing some CSS variables, you can comment out line 4 and 8 in _root.scss and then recompile the code. However, if you want to retain these variables, simply add "color-" at the beginning of those lines, like so: --color-#{$color}: #{$value};

@@ -1,11 +1,11 @@
 :root {
   // Remember that custom variable values only support SassScript inside `#{}`.
   @each $color, $value in $colors {
-    --#{$color}: #{$value};
+    --color-#{$color}: #{$value};
   }

   @each $color, $value in $theme-colors {
-    --#{$color}: #{$value};
+    --color-#{$color}: #{$value};
   }

   @each $bp, $value in $grid-breakpoints {

View the optimal solution

Update Color in _root.scss

Encountering issues compiling the SCSS file

Answer №3

November 2019 issue with scss/_root.scss (Line 4: Invalid CSS after "...lor}: #{$value}": expected "{", was ";")

At the time, I was using Ubuntu 18.04 and had installed sass-3.7.4.gem

It soon became apparent that "Ruby Sass has reached end-of-life and should no longer be used"

After running the command 'sudo npm install -g sass --version', I found myself with version 1.23.6 compiled with dart2js 2.6.1

To my relief, this resolved the issue and the css files were processed in less than 5 seconds.

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

Eliminating specific text and images from WordPress articles

I am working on a Wordpress website where the post's content is displayed using <?php the_content(); ?> The content includes images and text that are all outputted within < p > tags. My goal is to style the margins/padding of the image ...

phphtmlcsswordpress

Is there a way to reposition the arrows in this Bootstrap 5 accordion to appear ahead of the text?

Here's an example from Bootstrap 5 web page that I've been working with (https://getbootstrap.com/docs/5.0/components/accordion/). My query pertains to positioning the arrows before the text in the accordion items. Despite attempting various appr ...

htmlcssbootstrap-5

Switching over to the latest version of Material-UI, v1.x.x

Currently, my app relies on Material-UI v0.17.0 which is not compatible with React v16.0.0. In order to make it work, I need to upgrade to Material-UI v1.0.0. I came across a migration tool here, but it only updates import statements. Many props have chan ...

javascriptcssversion-controlmigrationmaterial-ui

Adaptable Design - Concealing Facebook Page Plugin at Specific Screen Widths

Can someone help me figure out how to hide the Facebook page plugin on my website? I tried using CSS but it doesn't seem to be working. Here is the code snippet: @media only screen and (max-width:800px){ .fb-page{ visibility: hidden; } This is t ...

htmlcssfacebookresponsive-designresponsive

Guide on creating a hand-drawn pencil circle using only CSS!

Is anyone familiar with how to create a hand-drawn pencil circle hover effect using pure CSS, without relying on SVG like the one featured on CodeMyUi? I've seen examples accomplished with SVG, but I'm specifically interested in achieving it usin ...

htmlcsspure-css

CSS: Breaking free from the constraints of a Bootstrap-inspired grid layout

Looking to create a template with a background on the left side that extends to the edge of the page within an 8 of 12 bootstrap columns setup. The remaining 4 columns on the right will not have a background. This layout should be responsive, stacking on t ...

cssbootstrap-4

VueJS is preventing the closure of the modal through jQuery

Within the index.blade.php page, I have the following code snippet: <div id="books_listing" class="container"> <div class="alert alert-success" role="alert"> <p>Book suggestions has been enabled.</p> <span cl ...

jqueryvue.jsbootstrap-4

What is the method for rearranging the order of Bootstrap 5 columns within nested elements without using hidden duplicates?

This snippet of code is designed to show blocks in different ways on mobile and desktop devices. <div class="col-12 col-sm-6 order-sm-1">TITLE</div> <div class="col-12 col-sm-6 order-sm-0">IMAGE</div> <div cla ...

htmlcsstwitter-bootstrapresponsivebootstrap-5

Buefy fails to respond to Sass styling efforts

Hey there, I'm new to Vue and I've set up a simple Vue (2) app with node-sass and sass-loader following the instructions here. I have Buefy imported in main.js and below is an excerpt from my App.vue file: <style lang="scss"> // ...

vue.jssassvuejs2bulmabuefy

Certain parts of the CSS grid are not aligning properly within the grid lines

I'm having trouble with my CSS grid. The red section fits in the first square, but the rest of the content seems to be out of place in the grid. I'm new to all this and I can't figure out what I'm missing. I've tried everything but ...

csscss-grid

When a new element is dynamically added to a table cell, how is the computation of "width: 100%" handled?

When utilizing Backgrid for editing values in a table, an <input type="text"> is inserted inside the <td>. Despite setting the input to max-width: 100%, it can still cause the column to expand beyond desired dimensions. To see this behavior in ...

cssbackgrid

Looking for assistance with HTML/CSS code

Adding the code snippet below into my Shopify product-liquid file caused chaos on the page, altering the font and even changing the shape of the add to cart button... The problematic code is shown below: <div id="shopify-section-product-icon-gallery" ...

htmlcssshopify

Arrange Raphael Objects in Their Relative Positions

I've been experimenting with Raphael.js recently and I've encountered an issue related to the positioning of each Raphael object. My goal is to create multiple 'canvases' without having them overlap within a predefined div on the page. ...

javascripthtmlcsssvgraphael

Resolving odd SVG anomalies

I recently exported three SVGs from Sketch to include in HTML, but one of them (specifically the Twitter icon) is presenting a mystery with its appearance. All three SVGs were created in the same manner, using #999999 as the stroke color and having a stro ...

htmlcsssvgsketchapp

issue with the margin-bottom property not functioning as expected

Question about CSS code: .dropdown-menu { position:absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; list-style: none; font-size: 14px; background-color: #ff ...

htmlcssdrop-down-menu

The appearance of my website appears differently depending on the resolution

Just recently, I began exploring the world of HTML/CSS/JS and created a handy tool for my personal use. However, I encountered an issue when viewing it on different resolutions which caused some elements to look distorted. The tool I made allows me to inp ...

javascriptjqueryhtmlcss

The only functioning href link is the last one

Currently, I am in the process of constructing a website using HTML and CSS. My goal is to create a white rectangle that contains 4 images, each serving as a clickable link redirecting users to different sections on the page. The issue I am facing is that ...

htmlcsshref

Is there a way to customize the background color of Material-UI MenuItem when hovering over it through AutoComplete props?

AutoComplete utilizes the Menu component to display MenuItems as demonstrated in the documentation on those respective pages. I am looking to modify the backgroundColor of a MenuItem when it is hovered over. While I have been successful in changing the co ...

cssreactjsmaterial-ui

Utilizing jQuery to pinpoint the exact position within a Flexbox container

I have a unique setup with multiple boxes arranged using Flexbox as the container and list tags as individual boxes inside. These boxes are responsive and change position as the width is resized. My goal is to use jQuery to detect which boxes are touching ...

javascriptjqueryhtmlcss

Is there a way to incorporate pseudo-dynamic css into my projects?

I'm struggling with managing custom colored elements on my website. For instance, I have a hundred navigation squares on the site, each with its own unique color. The only solution I can think of is creating separate CSS classes for each color, but t ...

javascriptcss