Gulp-sass没有正确编译基金会6

Question

我对Foundation 6文件有一些问题,由于某些原因它们不包括所有sass组件.我尝试使用Foundation 5,它工作正常.

这是我的gulp任务:

gulp.task('styles', ['clearCss'], function() {
    gulp.src('assets/sass/app.scss')
        .pipe(plumber(plumberErrorHandler))
        .pipe(sourcemaps.init())
        .pipe(sass({
            outputStyle: 'compressed'
        })
        .on('error', notify.onError(function(error) {
            return "Error: " + error.message;
        }))
        )
        .pipe(autoprefixer({
            browsers: ['last 2 versions', 'ie >= 9']
        }))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./assets/dist/css')) 
        .pipe(browserSync.stream({match: '**/*.css'}))
        .pipe(notify({
            message: "Styles task complete!"
        }));
});

这是我的app.scss:

// Import Foundation
@import "../components/foundation/scss/foundation";

它适用于我自己的sass文件,但完全忽略了基础部分.

Answer 1

您应该导入文件foundation-sites.scss,而不是scss/foundation.scss.文件foundation.scss只有一个@mixin基础 - 所有包含在foundation-sites.scss中的基础:

@include foundation-everything;

但是foundation-sites.scss在6.0.4中有错误,这是我的日志:

Error in plugin 'sass'
Message:
    bower_components\foundation-sites\foundation-sites.scss
Error: File to import not found or unreadable: foundation
       Parent style sheet: stdin
        on line 1 of stdin
>> @import 'foundation';

修复:

更改系NR 1文件基础上,sites.scss从 @import 'foundation';到@import 'scss/foundation';

Answer 2

基础6的正确方法:

如果你看看foundation.scss文件(https://github.com/zurb/foundation-sites-6/blob/develop/scss/foundation.scss)

是的它导入了所有必需的组件,但由于它们现在是mixins而不是常规的sass,你必须通过简单地调用mixin来明确告诉你想要使用它们.

app.scss

@import 'foundation';
@include foundation-everything; // Very important if you want to include all of foundation css to your complied css

gulpfile.js

gulp.task('scss', function() {
    return gulp.src('app.scss')
        .pipe(plugins.sass(
           {includePaths: ['./node_modules/foundation-sites/scss']}
        ))
        .pipe(gulp.dest('css'))
        .pipe(plugins.notify({ message: 'Sass task complete' }));
});