断点-sass在gulp设置中未加载，Susy工作正常

Question

嗨，我正在尝试让断点-sass在我的Gulp设置中与susy一起工作

我已经运行了npm install断点- sass --save-dev，并用@import "./node_modules/breakpoint-sass/stylesheets/breakpoint"；将它链接到我的sass文件的顶部(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 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;
       }

    }

 }

h1标签在所有屏幕宽度上都是红色的，而不是绿色的。我不明白为什么会这样。我以前在ruby的一个普通项目中使用过断点，没有任何问题。

谢谢

Answer 1

断点的includePath太深了一层，省略尾随的/breakpoint，使其看起来像这样：

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

一旦设置了includePath，就不需要在@import中指定完整路径，因为gulp已经知道要查找的位置。因此，您可以将@import减少为：

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

如果事情没有像预期的那样工作，检查一下编译后的css总是一个很好的方法。

Answer 2

感谢- just给那些尝试过@zisoft的好的解决方案的人一个小小的调整，但是不能让它工作，我成功地使用了'./node_modules/breakpoint-sass/stylesheets'，但是如果没有./，它就会失败。对一些人来说可能很明显，但想做个笔记。