Sass Breakpoint won't work - what am I doing wrong?

Question

I just installed Breakpoint, added

require "breakpoint"

to my config.rb, and defined these breakpoints

$mobileMedium : 480px;
$tabletVertical : 768px;
$desktopNormal : 1024px;
$desktopWide : 1200px;

to my _breakpoint.scss.

When I tried to use one of the breakpoints, like this;

@include breakpoint($mobileMedium) {
…
}

terminal told me

error sass/screen.scss (Line 27: Undefined mixin 'breakpoint'.)

why is that?

Answer 1

You probably need import breakpoint at the top of the _breakpoint.scss partial

@import "breakpoint";

Answer 2

error sass/screen.scss 

tells me that the file you are compiling is not a partial. Therefore it is not pulling in all the imports from your manifest file or your main.scss file. if this is your main scss file then as stated you will need to do all your gem imports at the top of the file.

If you rename the file _screen.scss it will then pull in the

@import 'breakpoint' 

from your main scss file.

Answer 3

install pckg: npm i breakpoint-sass include this in your _breakpoint.scss file :

@import '~breakpoint-sass/stylesheets/breakpoint';

import and use the breakpoint file in scss which you are using.

@import 'breakpoints';