我对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文件，但完全忽略了基础部分。
答案 0 :(得分：13)
您应该导入文件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行
@import 'foundation';至@import 'scss/foundation';
答案 1 :(得分：10)
基础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' }));
});
答案 2 :(得分：2)
我和基金会网站（基金会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您需要的特定组件。
答案 3 :(得分：1)
我用gulp + bower设置做了什么：
$scope.typeArrays = function () {
var vm = this;
vm.dataTypes = [];
vm.dataTypes = [
{ id: 'bigint', name: 'bigint' },
{ id: 'binary', name: 'binary' },
{ id: 'bit', name: 'bit' },
{ id: 'char', name: 'char' },
{ id: 'date', name: 'date' },
{ id: 'datetime', name: 'datetime' },
{ id: 'datetime2', name: 'datetime2' },
{ id: 'datetimeoffset', name: 'datetimeoffset' },
{ id: 'decimal', name: 'decimal' },
{ id: 'float', name: 'float' },
{ id: 'image', name: 'image' },
{ id: 'int', name: 'int' },
{ id: 'money', name: 'money' },
{ id: 'nchar', name: 'nchar' },
{ id: 'ntext', name: 'ntext' },
{ id: 'numeric', name: 'numeric' },
{ id: 'nvarchar', name: 'nvarchar' },
{ id: 'real', name: 'real' },
{ id: 'smalldatetime', name: 'smalldatetime' },
{ id: 'datetimeoffset', name: 'datetimeoffset' },
{ id: 'smallint', name: 'smallint' },
{ id: 'smallmoney', name: 'smallmoney' },
{ id: 'sql_variant', name: 'sql_variant' },
{ id: 'text', name: 'text' },
{ id: 'time', name: 'time' },
{ id: 'tinyint', name: 'tinyint' },
{ id: 'uniqueidentifier', name: 'uniqueidentifier' },
{ id: 'varbinary', name: 'varbinary' },
{ id: 'varchar', name: 'varchar' }
];
}
/src/scss/app.scss
@import 'settings';
@import '../../bower_components/foundation-sites/scss/foundation';
@include foundation-everything;
包含我的基础变量覆盖，自定义CSS等。对我而言，诀窍是settings.scss完整文件路径然后@import mixin。
虽然包含所有内容过多，但我更倾向于在没有麻烦的情况下进行开发，然后使用uncss清除掉死的CSS代码。
答案 4 :(得分：0)
我必须编辑基础网站的bower.json文件来更改main.scss基础@import。
自：
"main": [
"scss/foundation.scss",
"js/foundation.js"
],
要：
"main": [
"foundation-sites.scss",
"js/foundation.js"
],
以及foundation-sites.scss文件。
@import 'foundation';
要：
@import 'scss/foundation.scss';
我不认为这是最好的选择，但我的sass，grunt和bower知识是有限的。
答案 5 :(得分：0)
如果您有gulp文件，请包含'node_modules / foundation-sites / scss'，然后在app.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');
}
};
不要忘记包含所需的依赖项。