Breakpoint-sass не загружается в gulp setup, Susy работает нормально

Question

Привет, я пытаюсь заставить точку останова работать с Сьюзи в моей настройке Gulp.

Я запустил npm install breakpoint-sass --save-dev и связал его с вершиной моего файла sass с помощью @import "./node_modules/breakpoint-sass/stylesheets/breakpoint"; (susy работает нормально из @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}))
});

и мой scss частичный

@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 красный на всех широтах экрана и никогда не зеленый. Я не понимаю, почему это происходит. Я использовал точку останова ранее в grunt проекте с ruby, и у меня не было проблем.

Спасибо

Answer 1

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

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

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

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

Всегда полезно заглянуть в скомпилированный CSS, если все работает не так, как ожидалось.

Answer 2

Спасибо - всего одна небольшая настройка, которую можно предложить всем, кто попробовал хорошее решение от @zisoft и не смог заставить его работать, я использовал './node_modules/breakpoint-sass/stylesheets' с успехом, где без ./впереди это не удастся. Может быть, для кого-то это очевидно, но хотелось бы отметить.