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

Question

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

Answer 1

Вы должны импортировать файл foundation-sites.scss, а не scss/foundation.scss. Файл foundation.scss имеет только @mixin краеугольный все, который входит в фундаментной-sites.scss:

@include foundation-everything; 

Однако фундаментный 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 в файл фундаментной-sites.scss от @import 'foundation'; до @import 'scss/foundation';

Answer 2

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

От:

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

To:

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

А также файл фундаментный sites.scss.

@import 'foundation'; 

To:

@import 'scss/foundation.scss'; 

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

Answer 3

То, что я сделал с моим глотком + беседка установки: /src/scss/app.scss @import 'settings'; @import '../../bower_components/foundation-sites/scss/foundation'; @include foundation-everything; settings.scss содержащемуся мой фундаментные переменной перекрывает, пользовательские CSS и т.д. Уловка для меня было @import полный путь к файлу, то @include Mixin.

Хотя излишне включать все, я предпочитаю разрабатывать без каких-либо проблем, а затем использовать uncss для очистки мертвого кода CSS.

Answer 4

я проглатывать-дерзость работы с учредительными-сайтов (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; 

Если вы не хотите, чтобы загрузить все componenents фундамент, вы не нужно.Вместо @include foundation-everything, просто @include конкретных компонентов вам нужно.

Answer 5

Правильный подход для фундамента 6:

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

Да импортирует все необходимые компоненты, но так как они теперь Примеси и не регулярно вы должны явно сказать, что хотите использовать их, просто называя 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' })); 
}); 

Answer 6

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

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

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

Пример 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'); 
    } 
}; 

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