Bootstrap 4 _bootstrap-variables.scss le fichier est en train de casser la compilation

Question

Je viens d'installer Bootstrap 4 en utilisant Bundler (gem 'bootstrap', '~> 4.0.0.alpha6') et créé un nouveau projet avec Compass en exécutant bundle exec compass create SProject1 -r bootstrap --using bootstrap et voici ce que Je suis arrivé:

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. 

Si je tente de compiler je reçois la même erreur (évidemment):

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

Voici mon 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 

J'ai seulement ajouté la chose Autoprefixer comme dans la documentation, le reste des fichiers sont comme ils sont venus, ne les ont pas encore modifiés car je ne peux même pas compiler en raison de cette erreur bizarre avec la variable non définie: -breakpoints », je veux dire voilà comment le _bootstrap-variables.scss vient, donc je ne suis pas sûr de ce qu'il faut faire ...

Answer 1

_bootstrap-variables.scss est l'endroit idéal pour remplacer les variables qui sont définies par bootstrap. Notez que le fichier entier est commenté par défaut , ce qui signifie qu'il ne remplace aucune de ces variables.

Controle erreur partie sujettes montre:

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); 

comprenant une Mixin qui utilise le pas encore défini grille de points d'arrêt variable à la ligne 194.

de $ décommenter les lignes ci-dessus pour définir un ensemble de points d'arrêt résolu le problème pour moi. Les valeurs de point d'arrêt données sont les mêmes que celles utilisées par bootstrap, comme vu (https://v4-alpha.getbootstrap.com/layout/overview/) here.

Espoir qui aide,

Vive