小编erw*_*out的帖子

我已经设置了一个新项目来使用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.

我正在这个页面上工作:http://factor1hosting.com/~dnaz/wordpress/certifications/

我试图引入跨域iframe.

我正在使用@DavidJBradshaw的iFrame Resizer来实现这一目标.但是,我没有让iframe正常工作.

我只能使用普通的javascript init:

<script>iFrameResize({log:true})</script>

当我使用它时,我确实得到了日志,但它没有调整大小.我也尝试过jQuery方法:

$('iframe').iFrameResize( [{log: true}] );

并且不要调整日志或iframe的大小.我也尝试将其包装在准备好的文档中,但也无法实现.

任何人都有任何想法或想法,为什么这不正确？我的控制台没有抛出任何JS错误......谢谢!

编辑:这是我目前在HTML方面的设置示例.

<iframe src="http://phpstack-9420-21004-48731.cloudwaysapps.com/onlinecert/certification/login" width="100%" scrolling="no"></iframe>
                <script>
                    jQuery(document).ready(function () {
                        jQuery('iframe').iFrameResize( [{log:true}] );
                    });
                </script>

编辑2:这是我的控制台日志,当它触发时,它将iframe设置为150px,即使内容延伸的时间更长.

[iFrameSizer][Host page] Added missing iframe ID: iFrameResizer0 (http://phpstack-9420-21004-48731.cloudwaysapps.com/onlinecert/certification/login)
iframeResizer.js:97 
[iFrameSizer][Host page] IFrame scrolling disabled for iFrameResizer0
iframeResizer.js:97 
[iFrameSizer][Host page][init] Sending msg to iframe (iFrameResizer0:8:false:true:32:true:true:null:offset:null:null:0:false:parent)
iframeResizer.js:97 
[iFrameSizer][Host page][iFrame.onload] Sending msg to iframe (iFrameResizer0:8:false:true:32:true:true:null:offset:null:null:0:false:parent)
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] HTML & body height set to "auto"
iframeResizer.contentWindow.js:62 
[iFrameSizer][iFrameResizer0] Enable …

所以我注意到我目前的Gulp设置没有导入谷歌字体等远程字体.在我的main.scss档案中,我有:

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,700,700italic,400italic,900,900italic);

当它编译缩小时,它看起来像这样:

@font-face{font-family:Lato;font-style:normal;font-weight:100;src:local('Lato Hairline'),local('Lato-Hairline'),url(../../fonts.gstatic.com/s/lato/v11/zJY4gsxBiSo5L7tNutxFNg.ttf) format('truetype')}

我正在使用gulp-minify-css哪个使用clean-css.我知道你可能需要做些什么来让远程导入正常工作,但阅读文档会给我留下更多问题然后回答.这是我的gulp文件的一部分,用于处理Sass/CSS缩小:

// Minimize CSS
gulp.task('minify-css', function() {
  return gulp.src('css/src/*.css')
    .pipe(minifyCss({
        compatibility: 'ie8',
        aggressiveMerging: false
        }))
    .pipe(gulp.dest('css/'));
});

任何帮助,将不胜感激!谢谢.