Undefined mixin 'media-breakpoint-only'

Question

I am trying to start some bootstrap4/sass coding.

I thought I did everything required to configure my environment/project setup:

using

ruby 2.3.1p112 (2016-04-26 revision 54768) [i386-mingw32]

amongst installed gems (tried some bootstrap 3 before):

autoprefixer-rails (6.3.6.2)
bootstrap (4.0.0.alpha4, 4.0.0.alpha3)
bootstrap-sass (3.3.7, 3.3.6)
breakpoint (2.7.0)
compass (1.0.3)
compass-core (1.0.3)
compass-import-once (1.0.5)
sass (3.4.22)
sass-globbing (1.1.5, 1.1.0.pre.0)
sassy-buttons (0.2.6)
sassy-maps (0.4.0)

in styles.scss:

@import "compass/css3";
@import 'variables/.';
@import "bootstrap";

in config.rb:

require 'compass/import-once/activate'
require 'bootstrap'
require 'sass-globbing'
require 'breakpoint'

but my compass is working and producing styles.css:

/* line 18, c:/Ruby23/lib/ruby/gems/2.3.0/gems/bootstrap-4.0.0.alpha4/assets
/stylesheets/bootstrap/_normalize.scss */
body {
  margin: 0;
}

only untill some bootstrap mixins are used:

Error: Undefined mixin 'media-breakpoint-only'.

What am I missing?

Answer 1

I think you have everything you need but the order is wrong. the mixin media-breakpoint-only (a bootstrap sass function/mixin) is required for compass(?) to be working. Therefor you must change the order. The order (I think) should be like this:

1. require breakpoint
2. require bootstrap
3. require compass

The same for the styles.scss, bootstrap should come before compass. If this didn't work try another order. Let me know.