CODEWITHSUNDEEP
npmgulpsusysusy-sassbreakpoint-sass
Jafoolee
Jafoolee

Reputation: 11

Breakpoint-sass not loading in gulp setup, Susy is working fine

Hi I'm trying to get breakpoint-sass working with susy in my Gulp set-up

I have ran npm install breakpoint-sass --save-dev and linked it to the top of my sass file with @import "./node_modules/breakpoint-sass/stylesheets/breakpoint"; (susy is working fine from @import "./node_modules/susy/sass/susy";)

my gulp sass task is this 

gulp.task("styles", function() {
return gulp.src("scss/application.scss")
    .pipe( bulkSass())
    .pipe(maps.init())
    .pipe(sass())
    .pipe(sass({
        outputStyle: 'compressed',
        includePaths: ['node_modules/susy/sass', 'node_modules/breakpoint-sass/stylesheets/breakpoint'],
    }).on('error', sass.logError))
    .pipe(maps.write('./'))
    //.pipe(autoprefixer())
    .pipe(gulp.dest('./build/css/'))
    .pipe(reload({stream:true}))
});

and my scss partial

@import "./node_modules/breakpoint-sass/stylesheets/breakpoint";
@import "./node_modules/susy/sass/susy";

  #main {
    @include span(12);
    background: $primary-color;
    text-align: center;
       h1 {
        color: green;
        height: 2em;
       }

        @include breakpoint(500px){
          h1{
            color: red;
       }

    }

 }

the h1 tag is red at all screen widths and never green. I can't see why this is happening. I have used breakpoint before in a grunt project with ruby and had no issues.

Thanks

Upvotes: 1

Views: 1571

Answers (2)

kerns
kerns

Reputation: 1

Thanks – just one small tweak to suggest for anyone who tried the good solution by @zisoft and couldn't get it to work, I used './node_modules/breakpoint-sass/stylesheets' with success, where without the ./ in front it would fail. Maybe obvious to some people, but wanted to make a note.

Upvotes: 0

zisoft
zisoft

Reputation: 23078

Your includePath for breakpoint is one level too deep, omit the trailing /breakpoint so that it looks like so:

includePaths: ['node_modules/susy/sass', 'node_modules/breakpoint-sass/stylesheets'],

Once the includePath is set there is no need to specify the full path in the @import because gulp already knows where to look. So you can reduce your @imports to:

@import "breakpoint";
@import "susy";

Its always a good point to look into the compiled css if things don't work as expected.

Upvotes: 3

Related Questions