Question

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

});

我的头文件包含这些链接（使用inspect中的已编译文件解析确定）。

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

我已将基础文件复制到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

它出现在检查OK，并且它不是空的

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

我错过了什么？谢谢！

Laravel使用带有Elixir的Foundation 5，不编译因此页面不格式化

0 个答案: