Can't compile the SCSS file

[coldpumpkin]

I can't export the SCSS file in scss/bootstrap.scss, it says:

Error: Invalid CSS after "...lor}: #{$value}": expected "{", was ";" on line 4 of C:/bootstrap-4.0.0-beta.2/scss/_root.scss from line 11 of C:\bootstrap-4.0.0-beta.2\scss\bootstrap.scss Use --trace for backtrace. [Finished in 1.0s]

Straight from the downloaded folder, didn't even modify anything.

[andresgalante]

Hi @coldpumpkin what do you mean by "export"? compile? Can you please describe the steps to get that error?

[coldpumpkin]

Hey. Yes, compile, sorry. Basically I'm doing

sass --update something.css --stop-on-error --no-cache --sourcemap=none

I compiled this beta version before, like 2 weeks ago. But now it shows me this error...

[RandyBooth]

+1 . Same issue with @coldpumpkin

[Jas-n]

If you're not worried about loosing some of the CSS variables, comment out line 4 and 8 of _root.scss then recompile. Otherwise, add color- onto the beginning of these lines to give --color-#{$color}: #{$value};

By the looks of things SCSS doesn't like using a SCSS variable for the first part of the CSS variable... if that makes sense.

[RandyBooth]

Comment out @import "root"; to fix that for now.

[andresgalante]

@XhmikosR Can you please take a look, I can't reproduce the issue using Sass 3.5.2 (Bleeding Edge), I can compile bootstrap.scss and get this:

:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #868e96;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #868e96;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
}

It's also mentioned here #24550

[XhmikosR]

I don't use Sass personally...

Also, like I have I expressed in the past, since we don't compile with Sass, things can break. Not sure if we want to add testing for this in Travis, though.

Anyway, @coldpumpkin make sure you have the latest Sass installed and it should be fine.

Otherwise, @glebm should have more ideas.

[glebm]

@coldpumpkin Looks like you're using the Ruby Sass compiler and the version you have installed is too old. Please update to Sass v3.5.2+.

[RandyBooth]

Thanks @XhmikosR and @glebm . Updated Sass fixed my issue.

sudo gem update or sudo gem update sass

[coldpumpkin]

Yup, updating sass was the answer. Thanks all.

[Defcon0]

@glebm I updated to sass 3.5.2, but still getting

$ > sass --version Sass 3.5.2 (Bleeding Edge)

$ > /usr/bin/compass compile --app-dir '...' --config '.../config.rb' -I '...' error ....scss (Line 4 of assets/bootstrap/scss/_root.scss: Invalid CSS after "...lor}: #{$value}": expected "{", was ";") Compilation failed in 1 files.

What now :-(? Is it a difference that I use compass?

[glebm]

@Defcon0 Compass uses a different version of Sass, it locks its Sass dependency to < 3.5.

Compass is deprecated and no longer supported, hasn't been updated for almost 3 years, and Bootstrap 4 is not compatible with it.

Migrate to using sass directly instead of using compass.

[Defcon0]

@glebm You're right. We migrated our plugin to sass and (optionally) bourbon. Now works like a charm :-)

[sanyokdb]

At me too produces an error. Gem::ConflictError on line ["2293"] of C: Unable to activate bootstrap-4.0.0.bet a2, because sass-3.4.25 conflicts with sass (>= 3.5.2) Run with --trace to see the full backtrace sass -v sass 3.5.3 Bleeding Edge

What is the problem?

[glebm]

@sanyokdb Run bundle update and if that doesn't work post the full output here.

[sanyokdb]

Even reinstalling sass and compass did not help.

gem unistall sass gem unistall compass

reinstalled

gem install sass - the latest version of sass 3.5.3 has been installed gem install compass - installed compass together sass 3.4.25

in config.rb I insert

require 'bootstrap'

and when you start compass watch

gives an error message

Gem :: ConflictError on line ["2293"] of C: Unable to activate bootstrap4.0.0.bet a2, because sass-3.4.25 conflicts with sass (> = 3.5.2) Run with --trace to see the full backtrace

in folder C:\Ruby24-x64\lib\ruby\gems\2.4.0\gems\ are located sass-3.4.25 and sass-3.5.3

how to solve the problem?

Is everything right?

[XhmikosR]

The error message is pretty clear; just uninstall the old Sass version and try again.

[glebm]

@sanyokdb Don't use compass, see https://github.com/twbs/bootstrap/issues/24549#issuecomment-339655415

[sanyokdb]

Removed the old version of gem unistall sass -v 3.4.25 when you start compass watch error again

I have Windows 7 64bit what program can I use to compile sass?

[sanyokdb]

I have Windows 7 64bit what program can I use to compile sass?

[JamesVanWaza]

@sanyokdb Remove compass Then reinstall new version of sass

[sanyokdb]

I wrote that the reinstallation did not help.

[JanGalek]

Try change in _root

from:

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

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

to:

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

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

[jorgeinturias]

@JanGalek yep, this works for me, thanks

[oomlaut]

Try updating your version of Sass. I had the issue and when I updated from 3.4.23 to 3.5.5 was able to compile successfully. I also had to remove Compass to get the version to report correctly.

[kirkbross]

I'm running ruby 2.5.0p0 (2017-12-25 revision 61468) [x64-mingw32] in Windows 10 and sass 3.5.5 (bleeding edge) and I still get the compile error for _root.scss and other bs4 partials. Frustrated.

EDIT: Scratch that... it works now.

[bertoost]

Still have this issue with Sass 3.5.6 and no compass installed on CentOS VPS. I have to exclude the root.scss to make it work (for now). But this can't be the solution right? What versions do we have to use for Bootstrap?

[ernestcdc]

I am using Sass 3.5.6 and Compass 1.0.3 on Bootstrap 4.1.1 and experienced this issue. I have resolved this by modifying the _root.scss as @JanGalek's comment above.

[JamesVanWaza]

@ernestdc Compass is no longer supported

[siddheshkand]

Do not use ruby-sass remove it by sudo apt-get remove ruby-sass sudo apt-get purge ruby-sass sudo apt-get autoremove ruby-sass and install npm-sass globally by sudo npm i -g sass IT worked for me