Laravel 使用 Foundation 5 和 Elixir，sass 未编译，因此页面无法格式化答案

【问题标题】：Laravel using Foundation 5 with Elixir, sass not compiling so page does not formatLaravel 使用 Foundation 5 和 Elixir，sass 未编译，因此页面无法格式化
【发布时间】：2015-12-07 13:45:31
【问题描述】：

第一次这样做。我不明白为什么我不能正确编译我的sass Foundation 文件。我的gulp 命令执行没有错误，但我的页面没有格式化。如果我将 <head> 中已编译的 css 链接替换为 Foundation 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'
        ]);

});

我的头文件包含这些链接（通过检查中的编译文件可以解决）。

<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 文件夹中，因此我可以链接到 <head> 进行测试。如果我将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" />

我错过了什么？谢谢！

【问题讨论】：

标签： css sass gulp-sass laravel-elixir

【解决方案1】：

嗯，精神错乱了……出于某种原因，我的 scss 文件已损坏。是的，我花了这么长时间才弄明白……我下载了 Foundation 5 的主分支，手动将文件复制到 Laravel 项目中，一切正常。不知道为什么凉亭下载会给我坏文件。如果您在 Laravel 上使用 F5，以上所有内容都可以正常工作，所以希望这可以帮助其他人错过精神错乱！

【讨论】：