断点 - 萨斯在一饮而尽设置不加载，与Susy工作正常

嗨，我试图让断点 - 萨斯到苏珊的工作在我咕嘟咕嘟设置断点 - 萨斯在一饮而尽设置不加载，与Susy工作正常

我已经跑NPM安装断点，青菜--save -dev并通过@import将它链接到我的sass文件的顶部“./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})) 
});

和我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的咕噜声项目中使用过断点，并且没有问题。

感谢

来源

2016-12-05 Jafoolee

你includePath的断点是一个层次过深，省略后面/breakpoint，使它看起来像这样：

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

一旦includePath设置没有必要指定完整路径在@import，因为gulp已经知道在哪里看。所以，你可以减少你@import s到：

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

它总是一个好点的寻找到编译CSS是否如预期般的东西不起作用。

来源

2017-01-28 10:05:08 zisoft

断点 - 萨斯在一饮而尽设置不加载，与Susy工作正常

回答

相关问题