CODEWITHSUNDEEP
twitter-bootstrapcompiler-errorssasscompass-sassbootstrap-4
MYSTERiOUz
MYSTERiOUz

Reputation: 11

Bootstrap 4 _bootstrap-variables.scss file is breaking compilation

I just installed Bootstrap 4 using Bundler (gem 'bootstrap', '~> 4.0.0.alpha6') and created a new project with Compass by running bundle exec compass create SProject1 -r bootstrap --using bootstrap and here's what I got:

directory SProject1/ 
directory SProject1/javascripts/ 
directory SProject1/javascripts/bootstrap/ 
directory SProject1/sass/ 
directory SProject1/stylesheets/ 
   create SProject1/config.rb 
   create SProject1/sass/styles.scss 
   create SProject1/sass/_bootstrap-variables.scss 
   create SProject1/javascripts/bootstrap/alert.js 
   create SProject1/javascripts/bootstrap/button.js 
   create SProject1/javascripts/bootstrap/carousel.js 
   create SProject1/javascripts/bootstrap/collapse.js 
   create SProject1/javascripts/bootstrap/dropdown.js 
   create SProject1/javascripts/bootstrap/modal.js 
   create SProject1/javascripts/bootstrap/popover.js 
   create SProject1/javascripts/bootstrap/scrollspy.js 
   create SProject1/javascripts/bootstrap/tab.js 
   create SProject1/javascripts/bootstrap/tooltip.js 
   create SProject1/javascripts/bootstrap/util.js 
   create SProject1/javascripts/bootstrap-sprockets.js 
   create SProject1/javascripts/bootstrap.js 
   create SProject1/javascripts/bootstrap.min.js 
    error SProject1/sass/styles.scss (Line 194 of SProject1/sass/_bootstrap-variables.scss: Undefined variable: "$grid-breakpoints".)
Compilation failed in 1 files.

If I try to compile I get the same error (obviously):

modified sass/styles.scss
    error sass/styles.scss (Line 194 of sass/_bootstrap-variables.scss: Undefined variable: "$grid-breakpoints".)

Here's my config.rb:

require 'bootstrap'
require 'compass/import-once/activate'
# Require any additional compass plugins here.
require 'autoprefixer-rails'

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

on_stylesheet_saved do |file|
  css = File.read(file)
  map = file + '.map'

  if File.exists? map
    result = AutoprefixerRails.process(css,
      from: file,
      to:   file,
      map:  { prev: File.read(map), inline: false })
    File.open(file, 'w') { |io| io << result.css }
    File.open(map,  'w') { |io| io << result.map }
  else
    File.open(file, 'w') { |io| io << AutoprefixerRails.process(css) }
  end
end

I only added the Autoprefixer thing as in the documentation, the rest of the files are as they came, haven't modified them yet as I can't even compile due to this weird error with the Undefined variable: "$grid-breakpoints", I mean that's how the _bootstrap-variables.scss comes, so I am not sure what to do...

Upvotes: 1

Views: 927

Answers (1)

Tobi Ge
Tobi Ge

Reputation: 11

_bootstrap-variables.scss is the place to override variables that are defined by bootstrap. Notice how the entire file is commented out by default, meaning it is not overriding any of these variables.

Inspecting the error prone part shows: 

187 // $grid-breakpoints: (
188 //   xs: 0,
189 //   sm: 576px,
190 //   md: 768px,
191 //   lg: 992px,
192 //   xl: 1200px
193 // ); 
194 @include _assert-starts-at-zero($grid-breakpoints);

Including a Mixin that uses the not yet defined $grid-breakpoints variable at line 194.

Uncommenting the lines above to define a set of breakpoints solved the issue for me. The given breakpoint values are the same that bootstrap uses, as seen (https://v4-alpha.getbootstrap.com/layout/overview/) here.

Hope that helps,

Cheers

Upvotes: 1

Related Questions