Question

我刚刚使用Bundler（gem'bootstrap'，'〜＆gt; 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的东西，其余的文件都是它们来的，还没有修改它们因为我无法编译因为未定义变量的这个奇怪的错误： “$ grid-breakpoints”，我的意思是_bootstrap-variables.scss是如何出现的，所以我不知道该怎么办......

Answer 1

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

检查容易出错的部分：

{{1}}

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

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

希望有所帮助，

干杯

Bootstrap 4 _bootstrap-variables.scss文件正在破解编译

1 个答案: