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

Question

因此，我试图在我的 Laravel 项目中引入并编译 Foundation 6，但我似乎从我的 gulpfile.js 中遗漏了一些东西，以使其按预期工作。

首先我使用下载包

bower install foundation-sites --save

没问题。

然后我在我的 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'
);

});

(是的，我知道我可以组合复制命令，我会的。)

当我运行 gulp 时，一切看起来都很好。

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 与分布式版本匹配有什么想法吗？

更新#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;

完成!