Gulp-sass 没有正确编译 Foundation 6
Gulp-sass not compiling Foundation 6 properly
我在使用 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 文件,但完全忽略基础部分。
您应该导入文件 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 中的第 1 行
@import 'foundation';
到 @import 'scss/foundation';
我必须编辑基金会站点的 bower.json 文件以更改 main.scss 基金会 @import。
发件人:
"main": [
"scss/foundation.scss",
"js/foundation.js"
],
收件人:
"main": [
"foundation-sites.scss",
"js/foundation.js"
],
以及基础-sites.scss文件。
@import 'foundation';
收件人:
@import 'scss/foundation.scss';
我认为这不是最佳选择,但我的 sass、grunt 和 bower 知识有限。
我对 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 代码。
我有 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
您需要的特定组件。
基础 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' }));
});
如果您有 gulp 文件,请包含 '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');
}
};
不要忘记包含所需的依赖项。
我在使用 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 文件,但完全忽略基础部分。
您应该导入文件 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 中的第 1 行
@import 'foundation';
到 @import 'scss/foundation';
我必须编辑基金会站点的 bower.json 文件以更改 main.scss 基金会 @import。
发件人:
"main": [
"scss/foundation.scss",
"js/foundation.js"
],
收件人:
"main": [
"foundation-sites.scss",
"js/foundation.js"
],
以及基础-sites.scss文件。
@import 'foundation';
收件人:
@import 'scss/foundation.scss';
我认为这不是最佳选择,但我的 sass、grunt 和 bower 知识有限。
我对 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 代码。
我有 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
您需要的特定组件。
基础 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' }));
});
如果您有 gulp 文件,请包含 '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');
}
};
不要忘记包含所需的依赖项。