KrzysiekK KrzysiekK - 1 year ago 189
Ruby Question

Undefined mixin 'media-breakpoint-only'

I am trying to start some bootstrap4/sass coding.

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


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

amongst installed gems (tried some bootstrap 3 before):

autoprefixer-rails (

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 Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download