twitter-bootstrap - Bootstrap 4 _bootstrap-variables.scss文件破坏了编译

Question

我刚刚使用Bundler(gem'bootstrap'，'〜> 4.0.0.alpha6')安装了Bootstrap 4，并通过运行bundle exec compass create SProject1 -r bootstrap --using bootstrap与Compass创建了一个新项目，这是我得到的:

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.

如果我尝试编译，则会收到相同的错误(显然):

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

这是我的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

我只是在文档中添加了Autoprefixer东西，其余文件都是它们来的，还没有对其进行修改，因为由于 Undefined变量的奇怪错误，我什至无法编译:“$ grid-breakpoints “，我是说_bootstrap-variables.scss就是这样来的，所以我不确定该怎么做...

Answer 1

_bootstrap-variables.scss是覆盖变量的地方
由 bootstrap 定义。请注意如何注释掉整个文件
默认情况下，这意味着它不会覆盖任何这些变量。

检查容易出错的部分显示:

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

在第194行包括一个使用尚未定义的$ grid-breakpoints变量的Mixin。

取消注释上面的行以定义一组断点的注释对我来说解决了这个问题。给定的断点值与 bootstrap 使用的相同，如( https://v4-alpha.getbootstrap.com/layout/overview/) here所示。

希望能有所帮助，

干杯