我已经设置了一个新项目来使用Gulp和Sass测试Foundation 6,但它似乎根本没有编译.还有另一篇文章接近这个主题,但我个人认为接受的答案不是正确的解决方案 - 因为它包含了所有组件,实际上与Zurb建议的相反(参见此问题:https://github.com/zurb/foundation-sites/issues/7537).无论如何 ......
我从凉亭安装了Foundation 6.1.1,并添加了我的gulp-sass函数的路径,gulpfile.js如下所示:
// Compile Our Sass
gulp.task('sass', function() {
return gulp.src('scss/theme.scss')
.pipe(sass({ includePaths : ['bower_components/foundation-sites/scss'], outputStyle: 'expanded'}).on('error', sass.logError))
.pipe(gulp.dest('css/'))
});
我的theme.scss情况如下:
//vendor file
@import '../bower_components/foundation-sites/scss/settings/settings';
@import '../bower_components/foundation-sites/scss/foundation';
body{
background: red;
}
编译我的scss时我没有错误,但输出theme.css看起来像这样:
/**
* Foundation for Sites by ZURB
* Version 6.1.1
* foundation.zurb.com
* Licensed under MIT Open Source
*/
body {
background: red;
}
所以看起来它正在击中文件,因为评论输出但它没有编译任何Sass导入foundation.scss.
发生这种情况是因为在Foundation 6中@import foundation只导入了用于SCSS的Foundation mixins.它是这样设置的,这样你就可以使用组件的Foundation mixins,而不是通过为该组件添加库存CSS类来膨胀你的CSS.
要导入所有 Foundation CSS类,您可以设置主app.scss文件(theme.scss在您的情况下),类似于:
@import 'settings';
@import 'foundation';
@import 'motion-ui';
@include foundation-everything;
@include motion-ui-transitions;
@include motion-ui-animations;
要仅导入所需组件的各个CSS类,请设置app.scss文件(theme.scss在您的情况下),如下所示,并注释掉您不使用的组件.
@import 'settings';
@import 'foundation';
@import 'motion-ui';
@include foundation-global-styles; // Always include the global-styles
@include foundation-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 motion-ui-transitions;
@include motion-ui-animations;
您还需要复制_settings.scss文件bower_components/foundation-sites/scss/settings/并将其放在项目的scss目录中.
最后,确保在以下任务中包含这两个路径gulpfile.js:
bower_components/foundation-sites/scss
bower_components/motion-ui/src/
京公网安备 11010802040832号 | 京ICP备19059560号-6 