断点 sass 没有在 gulp 设置中加载，Susy 工作正常答案

【问题标题】：Breakpoint-sass not loading in gulp setup, Susy is working fine断点 sass 没有在 gulp 设置中加载，Susy 工作正常
【发布时间】：2017-04-19 23:54:12
【问题描述】：

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

我已经运行了 npm install breakpoint-sass --save-dev 并使用 @import "./node_modules/breakpoint-sass/stylesheets/breakpoint" 将它链接到我的 sass 文件的顶部；（susy 在 @import "./node_modules/susy/sass/susy" 中运行良好；）

我的 gulp sass 任务是这样的

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 标签在所有屏幕宽度上都是红色的，而不是绿色的。我不明白为什么会这样。我之前在一个带有 ruby 的 grunt 项目中使用过断点并且没有任何问题。

谢谢

【问题讨论】：

标签： npm gulp susy susy-sass breakpoint-sass

【解决方案1】：

谢谢 - 对于尝试了 @zisoft 的好解决方案但无法使其正常工作的任何人，只需进行一个小调整，我成功地使用了 './node_modules/breakpoint-sass/stylesheets'，如果没有前面的 ./，它将失败。也许对某些人来说很明显，但想记下。

【讨论】：

【解决方案2】：

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

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

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

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

如果事情没有按预期工作，查看编译后的 css 总是一个好点。

【讨论】：