Gulp-sass неправильно компилирует Foundation 6

У меня возникли проблемы с файлами Foundation 6, по некоторым причинам они просто не включают все дерзкие компоненты. Я пытался использовать 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, но полностью игнорирует основные части.


person user3586478    schedule 25.11.2015    source источник


Ответы (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';

Исправление:

Изменить строку № 1 в файле foundation-sites.scss с @import 'foundation'; на @import 'scss/foundation';

person Tomasz Rozmus    schedule 26.11.2015
comment
Да, меня смутила эта строка @import 'foundation';, поэтому после того, как я изменил путь и включил foundation-sites.scss, это наконец-то заработало. Спасибо. - person user3586478; 29.11.2015
comment
У меня такая же проблема, но я захожу сюда, чтобы сказать, что не верю, что это правильный ответ. Zurb на самом деле не рекомендует использовать foundation-sites.scss и импортировать то, как сейчас работает OP. (см.: github.com/zurb/foundation-sites/issues/7537 ) Вы не хотите использовать foundation-sites.scss, если не хотите включать все. Если вы выполняете индивидуальную установку, что вам следует делать, вам следует изменить компоненты в foundation.scss. Что, как говорится. Мой тоже не компилируется. - person erwstout; 31.12.2015

Правильный подход к основанию 6:

если вы посмотрите файл Foundation.scss (https://github.com/zurb/foundation-sites-6/blob/develop/scss/foundation.scss)

Да, он импортирует все необходимые компоненты, но так как теперь это миксины, а не обычный sass, вам нужно явно указать, что вы хотите их использовать, просто вызвав миксин.

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' }));
});
person Jimmy Obonyo Abor    schedule 30.03.2016
comment
Мне нравится это решение. Если я хочу урезать то, что я хочу использовать, я могу создать свою собственную копию Foundation.scss и создать собственный миксин. includePaths был самой полезной частью этого. Спасибо, что поделились Джимми. - person UncleAdam; 16.06.2017
comment
@UncleAdam Добро пожаловать, не стесняйтесь задавать мне любые вопросы, связанные с веб-разработкой. - person Jimmy Obonyo Abor; 16.06.2017

У меня 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 конкретные компоненты, которые вам нужны.

person Roman Edirisinghe    schedule 18.02.2016

Что я сделал с настройкой 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. код.

person tomByrer    schedule 24.01.2016

Мне пришлось отредактировать файл bower.json Foundation-Sites, чтобы изменить @import фундамента main.scss.

От:

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

To:

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

А также файл Foundation-sites.scss.

@import 'foundation';

To:

@import 'scss/foundation.scss';

Я не думаю, что это лучший путь, но мои знания о дерзости, ворчании и беседе ограничены.

person Randy Collier    schedule 29.11.2015

Если у вас есть gulpfile, включите 'node_modules/foundation-sites/scss', а затем в файле app.scss или style.scss выполните следующие действия:

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

Таким образом, вы импортируете ВСЕ, что может предложить Foundation. Конечно, все может быть немного излишним, но это необязательный выбор.

Пример задачи глотка:

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');
  }
};

Не забудьте включить необходимые зависимости.

person Marcus Ekström    schedule 28.09.2016