Gulp-sass 没有正确编译 Foundation 6

Posted

技术标签:

【中文标题】Gulp-sass 没有正确编译 Foundation 6【英文标题】:Gulp-sass not compiling Foundation 6 properly 【发布时间】:2016-02-28 09:47:13 【问题描述】:

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

【问题讨论】:

【参考方案1】:

如果您有 gulpfile,请包含“node_modules/foundation-sites/scss”,然后在您的 app.scss 或 style.scss 中执行以下操作:

@import "settings/settings";
@import "foundation";
@include foundation-everything;

这样您就可以导入 Foundation 提供的所有内容。当然,一切都可能有点矫枉过正,但这是一个可选的选择。

gulp 任务示例:

gulp.task('css', function() 
    return gulp.src(assets + 'scss/*.scss')
        .pipe(sass(
                includePaths: 'node_modules/foundation-sites/scss',
                errLogToConsole: true
            ))
            .on('error', handleError)
        .pipe(prefixer())
        .pipe(gulp.dest(themeDir))
        .pipe(browserSync.stream());
);

当然需要定义handleError。就我而言,它被定义为:

var handleError = function(err) 
  if (err) 
    var args = Array.prototype.slice.call(arguments);
    console.log(args);
    this.emit('end');
  
;

不要忘记包含所需的依赖项。

【讨论】:

【参考方案2】:

基础 6 的正确方法:

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

是的,它会导入所有必需的组件,但由于它们现在是 mixin 而不是常规的 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' ));
);

【讨论】:

我喜欢这个解决方案。如果我想减少我想要使用的内容,我可以创建自己的foundation.scss 副本并创建一个自定义mixin。 includePaths 是其中最有用的部分。感谢分享吉米。 @UncleAdam 欢迎随时问我任何与 Web 开发相关的问题【参考方案3】:

我有 gulp-sass 与基础站点(Foundation 6)合作:

我的 main.scss 文件:

@charset 'UTF-8';
/**
 * Main SCSS
 * Version 1.0.0
 * built with foundation-sites
 */

// import custom settings
@import 'settings';

// import foundation sass
@import "../bower_components/foundation-sites/scss/foundation";

/* either include all foundation components…  //*/
@include foundation-everything;

/* or include specific foundation components //*/
// @include foundation-global-styles;
  /* include either foundation-grid… //*/
// @include foundation-grid;
  /* or foundation-flex-grid (but don't include both) //*/
// @include foundation-flex-grid;
// @include foundation-typography;
// @include foundation-button;
// @include foundation-forms;
// @include foundation-visibility-classes;
// @include foundation-float-classes;
// @include foundation-accordion;
// @include foundation-accordion-menu;
// @include foundation-badge;
// @include foundation-breadcrumbs;
// @include foundation-button-group;
// @include foundation-callout;
// @include foundation-close-button;
// @include foundation-drilldown-menu;
// @include foundation-dropdown;
// @include foundation-dropdown-menu;
// @include foundation-flex-video;
// @include foundation-label;
// @include foundation-media-object;
// @include foundation-menu;
// @include foundation-off-canvas;
// @include foundation-orbit;
// @include foundation-pagination;
// @include foundation-progress-bar;
// @include foundation-slider;
// @include foundation-sticky;
// @include foundation-reveal;
// @include foundation-switch;
// @include foundation-table;
// @include foundation-tabs;
// @include foundation-thumbnail;
// @include foundation-title-bar;
// @include foundation-tooltip;
// @include foundation-top-bar;

如果您不想加载所有基础组件,则不必这样做。而不是@include foundation-everything,只需@include 您需要的特定组件。

【讨论】:

【参考方案4】:

我的 gulp + bower 设置做了什么: /src/scss/app.scss @import 'settings'; @import '../../bower_components/foundation-sites/scss/foundation'; @include foundation-everything; settings.scss 包含我的基础变量覆盖、自定义 CSS 等。对我来说,诀窍是 @import 完整文件路径然后 @include 混合。

虽然包含所有内容有点过分,但我更喜欢轻松开发,然后使用uncss 清理死的 CSS 代码。

【讨论】:

【参考方案5】:

我不得不编辑基础站点的 bower.json 文件来更改 main.scss 基础 @import。

发件人:

"main": [
    "scss/foundation.scss",
    "js/foundation.js"
],

收件人:

"main": [
    "foundation-sites.scss",
    "js/foundation.js"
  ],

以及基础站点.scss 文件。

@import 'foundation';

收件人:

@import 'scss/foundation.scss';

我认为这不是最好的选择,但我的 sass、grunt 和 bower 知识有限。

【讨论】:

【参考方案6】:

您应该导入文件foundation-sites.scss,而不是scss/foundation.scss。文件foundation.scss只有一个@mixin foundation-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 中的第 nr 1 行从 @import 'foundation';@import 'scss/foundation';

【讨论】:

是的,我被这个字符串 @import 'foundation'; 弄糊涂了,所以在我更改路径并包含 foundation-sites.scss 之后,这最终开始工作了。谢谢。 我遇到了同样的问题,但我在这里说我不相信这是正确的答案。 Zurb 实际上不鼓励使用 foundation-sites.scss 并导入 OP 现在的工作方式。 (请参阅:github.com/zurb/foundation-sites/issues/7537)除非您想包含所有内容,否则您不想使用 foundation-sites.scss。如果您正在进行自定义安装,您应该这样做,您需要修改 foundation.scss 中的组件。话虽如此。我的也没有编译。

以上是关于Gulp-sass 没有正确编译 Foundation 6的主要内容,如果未能解决你的问题,请参考以下文章

为啥 gulp-sass 不创建输出

Gulp-sass 5.0 如何使用带有 import() 而不是 require() 的编译器?

Gulp-sass 无法编译 scss 文件

gulp-sass 将 Google Fonts CSS 编译到文件中,中断协议相关链接

错误:找不到模块“gulp-sass”

gulp 插件之 gulp-less,gulp-sass 和 gulp-sourcemaps