正确配置 Laravel 5 Elixir 编译 .scss 文件

Question

我正在尝试使用 Laravel elixir 编译一个简单的 sass 文件 app.scss，它位于我的 resources > assets > sass 目录中。我安装了 node、gulp 和 elixir，我的 gulpfile.js 文件看起来像这样......

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

/*
 |--------------------------------------------------------------------------
 | Elixir Asset Management
 |--------------------------------------------------------------------------
 |
 | Elixir provides a clean, fluent API for defining some basic Gulp tasks
 | for your Laravel application. By default, we are compiling the Less
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {
    mix.sass('app.scss');
});

但是，当我运行 gulp 时，我遇到了一些奇怪的错误。我首先尝试了一个没有包含的简单 sass 文件...

body {
    padding-top: 40px;
}

body, label, /checkbox label {
    font-weight: 300px;
}

我的终端收到此错误...

[14:44:40] Starting 'default'...
[14:44:40] Starting 'sass'...
[14:44:41] Finished 'default' after 1.45 s
[14:44:41] gulp-notify: [Laravel Elixir] Error: invalid top-level expression
[14:44:41] Finished 'sass' after 1.47 s
[14:44:41] gulp-notify: [Error running notifier] Could not send message: not found: notify-send

当我将@include 'pages/home'; 添加到我的app.scss 文件的顶部（并且pages > home.scss 确实存在）时，我收到以下错误...

[14:38:03] Starting 'default'...
[14:38:03] Starting 'sass'...
[14:38:04] Finished 'default' after 1.42 s
[14:38:04] gulp-notify: [Laravel Elixir] Error: invalid name in @include directive
[14:38:04] Finished 'sass' after 1.44 s
[14:38:04] gulp-notify: [Error running notifier] Could not send message: not found: notify-send

我知道通知程序错误是因为我在 VM 中运行它，所以这不会打扰我，但之前的错误导致根本没有编译 sass。

如果有帮助，我将在 Mac 上运行 Laravel 5，OSX Mavericks 使用宅基地作为环境。

奇怪的是，我之前有这个工作，我刚开始一个新的 Laravel 项目，突然间它就不能工作了。有谁知道怎么回事？

Answer 1

第一个错误可能是body, label, /checkbox label {中的/引起的，去掉斜线应该可以了。

第二个是因为你使用@include，而你实际上想要@import。

@import 用于包含其他 sass/css 文件。 @include 用于使用 mixins。