用Laravel的Elixir(Gulp)编译Zurb Foundation 6

Question

所以我试图在我的Laravel项目中引入并编译Foundation 6,但我似乎错过了我的gulpfile.js中的一些东西,以便它按预期工作.

首先我使用下载包

凉亭安装基础 - 网站 - 保存

没问题.

然后我在我的gulpfile.js中有这个

elixir(function(mix) {


mix.sass(
    '../bower_components/foundation-sites/scss/**/*.scss'
);


mix.copy(
    'resources/assets/bower_components/jquery/dist/jquery.min.js',
    'public/js/jquery.min.js'
);

mix.copy(
    'resources/assets/bower_components/foundation-sites/dist/foundation.min.js',
    'public/js/foundation.min.js'
);

mix.copy(
    'resources/assets/bower_components/what-input/what-input.min.js',
    'public/js/what-input.min.js'
);

});

(是的,我知道我可以结合复制命令,我会.)

当我吞下一口气时,一切看起来都不错.

vagrant@homestead:~/Code/Kreddat$ gulp
[14:34:42] Using gulpfile ~/Code/Kreddat/gulpfile.js
[14:34:42] Starting 'default'...
[14:34:42] Starting 'sass'...

Fetching Sass Source Files...
  - resources/assets/bower_components/foundation-sites/scss/**/*.scss


Saving To...
   - public/css/app.css

[14:34:44] Finished 'default' after 1.61 s
[14:34:44] gulp-notify: [Laravel Elixir] Sass Compiled!
[14:34:44] Finished 'sass' after 2.38 s
[14:34:44] Starting 'copy'...

Fetching Copy Source Files...
   - resources/assets/bower_components/jquery/dist/jquery.min.js


Saving To...
   - public/js/jquery.min.js

[14:34:44] Finished 'copy' after 28 ms
[14:34:44] Starting 'copy'...

Fetching Copy Source Files...
   - resources/assets/bower_components/foundation-sites/dist/foundation.min.js


Saving To...
   - public/js/foundation.min.js

[14:34:44] Finished 'copy' after 24 ms
[14:34:44] Starting 'copy'...

Fetching Copy Source Files...
   - resources/assets/bower_components/what-input/what-input.min.js


Saving To...
   - public/js/what-input.min.js

[14:34:44] Finished 'copy' after 18 ms
[14:34:44] Starting 'copy'...

但是,当我在HTML文件中使用生成的CSS时,它看起来有点奇怪:

当我改变时<link rel="stylesheet" href="/css/app.css" type="text/css">,<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css" type="text/css">一切看起来都很棒:

这让我相信在我的gulpfile.js中包含Sass文件时我做错了.有关如何使我的编译CSS与分布式版本匹配的任何想法？

UPDATE#1这是我目前在gulpfile.js中的内容,但结果是一样的 - 页面看起来仍然很奇怪.

    mix.sass([
    '../bower_components/foundation-sites/scss/foundation.scss',
    '../bower_components/foundation-sites/scss/_global.scss',
    '../bower_components/foundation-sites/scss/**/*.scss',
    'app.scss'
], 'public/css/app.css');

Answer 1

解决了!

在我的gulpfile.js中:

    mix.sass(
    'app.scss',
    'public/css/app.css',
    { includePaths:
        ['resources/assets/bower_components/foundation-sites/scss/']
    });

在我的app.scss中:

@import 'foundation';
@include foundation-everything;

完成!