Breakpoint-SASS ne se charge pas dans la configuration engouffreur, Susy fonctionne bien

Question

Salut, je suis en train d'obtenir SASS-point d'arrêt de travail avec Susy dans ma configuration Gulp

J'ai couru NPM installer-SASS --save point d'arrêt -dev et l'a lié au début de mon fichier sass avec @import "./node_modules/breakpoint-sass/stylesheets/breakpoint"; (Susy fonctionne bien de @import "./node_modules/susy/sass/susy";)

ma gulp tâche SASS est ce

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})) 
}); 

et mon SCSS partielle

@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; 
     } 

    } 

} 

la L'étiquette h1 est rouge à toutes les largeurs d'écran et n'est jamais verte. Je ne peux pas voir pourquoi cela se passe. J'ai utilisé breakpoint auparavant dans un projet de grognement avec ruby ​​et n'ai eu aucun problème.

Merci

Answer 1

Votre includePath pour point d'arrêt est un niveau trop profond, omettre le /breakpoint arrière de sorte qu'il ressemble à ceci:

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

Une fois que le includePath est réglé, il n'y a pas besoin de préciser le plein chemin dans le @import parce que gulp sait déjà où chercher. Ainsi, vous pouvez réduire vos @import s à:

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

Il est toujours un bon point de regarder dans le css compilé si les choses ne fonctionnent pas comme prévu.