Breakpoint-дерзость не загружается в настройках глотком, Susy работает нормально

Question

Привет Я пытаюсь получить точку останова-дерзость работы с суперсимметрии в моей установке Глоток

Я побежал НПМ установить точку останова-дерзость --save -dev и связал его с вершиной моего sass-файла с помощью @import "./node_modules/breakpoint-sass/stylesheets/breakpoint"; (СУСИ работает отлично от @import "./node_modules/susy/sass/susy";)

мой Глоток дерзость задача это

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

и моя частичная СКС

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

    } 

} 

в h1 имеет красный цвет при всех ширинах экрана и никогда не будет зеленым. Я не понимаю, почему это происходит. Раньше я использовал точку останова в проекте с рубином и не имел проблем.

Благодаря

Answer 1

Ваш includePath для точки останова является один уровень слишком глубоко, опустить задний /breakpoint так, что она выглядит так:

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

После includePath установлен нет необходимости указывать полный путь в @import, потому что глоток уже знает, где искать. Таким образом, вы можете уменьшить @import с до:

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

всегда хорошая точка, чтобы посмотреть в скомпилированный CSS, если вещи не работают, как ожидалось.