斷點 - 薩斯在一飲而盡設置不加載，與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工作正常

回答

相關問題