Laravel 将 Foundation 5 与 Elixir 结合使用，sass 未编译，因此页面未格式化

Question

第一次这样做。我不明白为什么我不能正确编译我的 sass Foundation 文件。我的 gulp 命令执行没有错误，但我的页面没有格式化。如果我将 <head> 中编译的 css link 替换为 links 到基础 css 文件，那么它的格式就可以了。

我的 gulpfile.js 看起来像这样：

var elixir = require('laravel-elixir');

elixir.config.css.autoprefix.options.browsers = ['last 4 versions'];

elixir(function(mix) {

    // Compile CSS
    mix
        /* Copy the Foundation JS folder from bower_components to a js/foundation folder */
        .copy(
            'vendor/bower_components/foundation/scss', 'resources/assets/sass'
        )
        /* Copy the Foundation JS folder from bower_components to a js/foundation folder */
        .copy(
            'vendor/bower_components/foundation/js', 'resources/assets/js/foundation'
        )
        /* Build css files here */
        .sass(
            'app.scss', // Source files
            'public/css/app.css' // Destination folder
        )
        .scripts(
            'foundation/vendor/modernizr.js', 'public/js/modernizr.js', 'resources/assets/js'
        )
        .scripts([
                'foundation/vendor/fastclick.js',
                'foundation/vendor/jquery.js',
                'foundation/foundation.js',
                'app.js'
            ], // Source files
            'public/js/app.js' // Destination file
        )
        .version([
            'public/css/app.css',
            'public/js/modernizr.js',
            'public/js/app.js'
        ]);

});

我的头文件包含这些 links（在 inspect 中使用编译文件解析 OK）。

<link href="{{ elixir('css/app.css') }}" rel="stylesheet" />
<script src="{{ elixir('js/modernizr.js') }}"></script>
<script src="{{ elixir('js/app.js') }}"></script>

我已将 Foundation 文件复制到 public/temp 文件夹中，因此我可以 link 在 <head> 中进行测试。如果我将对硬 link 的 elixir 调用替换为 foundation.css，则页面上的格式有效。

<link href="temp/css/normalize.css" rel="stylesheet" />
<link href="temp/css/foundation.css" rel="stylesheet" />
<script src="temp/js/vendor/jquery.js"></script>
<script src="temp/js/vendor/fastclick.js"></script>
<script src="temp/js/foundation.js"></script>

我的页脚包含 Foundation 初始化：

<script>
    $(document).foundation();
</script>

我的 app.scss 看起来像这样：

/* Import Normalize.scss */
@import 'normalize';

/* Import the Foundation settings.scss page */
@import 'settings';

/* Import the Entire Foundation framework */
@import 'foundation';

我可以确认 sass 编译所需的文件存在并且位于正确的文件夹中。

resources/
   /assets
      /css
         /foundation
            /components
            _functions.scss
         _settings.scss
         app.scss
         foudnation.scss
         normalize.scss

$gulp # 命令运行正常，没有错误。

$ gulp #
[14:53:11] Using gulpfile f:\Projects\flyer\gulpfile.js
[14:53:11] Starting 'default'...
[14:53:11] Starting 'copy'...

Fetching Copy Source Files...
   - vendor/bower_components/foundation/scss/**/*

Saving To...
   - resources/assets/sass

[14:53:11] Finished 'default' after 58 ms
[14:53:11] Finished 'copy' after 126 ms
[14:53:11] Starting 'copy'...

Fetching Copy Source Files...
   - vendor/bower_components/foundation/js/**/*

Saving To...
   - resources/assets/js/foundation

[14:53:11] Finished 'copy' after 96 ms
[14:53:11] Starting 'sass'...

Fetching Sass Source Files...
   - resources\assets\sass\app.scss

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

[14:53:12] gulp-notify: [Laravel Elixir] Sass Compiled!
[14:53:12] Finished 'sass' after 691 ms
[14:53:12] Starting 'scripts'...

Fetching Scripts Source Files...
   - resources\assets\js\foundation\vendor\modernizr.js

Saving To...
   - public/js/modernizr.js

[14:53:13] gulp-notify: [Laravel Elixir] Scripts Merged!
[14:53:13] Finished 'scripts' after 708 ms
[14:53:13] Starting 'scripts'...

Fetching Scripts Source Files...
   - resources\assets\js\foundation\vendor\fastclick.js
   - resources\assets\js\foundation\vendor\jquery.js
   - resources\assets\js\foundation\foundation.js
   - resources\assets\js\app.js

Saving To...
   - public/js/app.js

[14:53:13] gulp-notify: [Laravel Elixir] Scripts Merged!
[14:53:13] Finished 'scripts' after 83 ms
[14:53:13] Starting 'version'...

Fetching Version Source Files...
   - public\css\app.css
   - public\js\modernizr.js
   - public\js\app.js

Saving To...
   - public\build

[14:53:13] Finished 'version' after 94 ms

输出文件位于：

public/
   /build
      /css
         app.css.map
         app-122456abc.css

并且出现在inspect OK中，并且不为空

<link href="/build/css/app-122456abc.css" rel="stylesheet" />

我错过了什么？谢谢！

Answer 1

好吧，精神错乱了......由于某种原因，我的 scss 文件已损坏。是的，我花了这么长时间才弄明白……我下载了 Foundation 5 的 master 分支，手动将文件复制到 Laravel 项目，一切正常。不知道为什么 bower 下载给我错误的文件。如果您在 Laravel 上使用 F5，以上所有方法都可以正常工作，所以希望这能帮助其他人错过疯狂！

Laravel 将 Foundation 5 与 Elixir 结合使用，sass 未编译，因此页面未格式化

Laravel using Foundation 5 with Elixir, sass not compiling so page does not format

css

sass

gulp-sass

laravel-elixir