KrzysiekK KrzysiekK - 1 year ago 138
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.