Npm 断点sas未加载到gulp设置中,Susy工作正常
嗨,我正在尝试让断点sas在我的Gulp设置中与susy一起工作 我已经运行了npm安装断点sass——保存dev并用@import将其链接到我的sass文件的顶部。“/node_modules/breakpoint sass/stylesheets/breakpoint”;(susy在@import./node\u modules/susy/sass/susy中工作正常) 我的任务就是这样Npm 断点sas未加载到gulp设置中,Susy工作正常,npm,gulp,susy,susy-sass,breakpoint-sass,Npm,Gulp,Susy,Susy Sass,Breakpoint Sass,嗨,我正在尝试让断点sas在我的Gulp设置中与susy一起工作 我已经运行了npm安装断点sass——保存dev并用@import将其链接到我的sass文件的顶部。“/node_modules/breakpoint sass/stylesheets/breakpoint”;(susy在@import./node\u modules/susy/sass/susy中工作正常) 我的任务就是这样 gulp.task("styles", function() { return gulp.src("sc
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项目中使用过断点,没有任何问题
感谢您的
includePath
,因为断点太深了一级,请省略后面的/breakpoint
,使其看起来像这样:
includePaths: ['node_modules/susy/sass', 'node_modules/breakpoint-sass/stylesheets'],
一旦设置了includePath
,就不需要在@import
中指定完整路径,因为gulp已经知道在哪里查找。因此,您可以将@import
简化为:
@import "breakpoint";
@import "susy";
如果事情没有按预期进行,那么查看编译后的css总是一个很好的方法。谢谢–对于那些通过@zisoft尝试了好的解决方案但没有成功的人来说,这只是一个小小的调整,我成功地使用了
。/node_modules/breakpoint sass/stylesheets'
,如果前面没有/
,它就会失败。也许对某些人来说很明显,但我想做个记录