Gulp-sass 没有正确编译 Foundation 6

我在使用 Foundation 6 文件时遇到了一些问题，由于某些原因，它们没有包含所有 sass 组件。我尝试使用 Foundation 5，效果很好。

这是我的吞咽任务:

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 文件，但完全忽略了基础部分。

最佳答案

您应该导入文件foundation-sites.scss，而不是scss/foundation.scss。文件foundation.scss 只有一个 @mixinfoundation-everything 包含在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';

修复:

将文件 foundation-sites.scss 中的第 1 行更改为@import 'foundation'; 到 @import 'scss/foundation';

关于Gulp-sass 没有正确编译 Foundation 6，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33919299/