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 是覆盖变量的地方 由引导程序定义。注意整个文件是如何被注释掉的 默认情况下，这意味着它不会覆盖任何这些变量。

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

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。

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

希望对你有帮助，

干杯