正确配置 Laravel 5 Elixir 编译 .scss 文件
Correctly configure Laravel 5 Elixir to compile .scss files
我正在尝试使用 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 被编译。
如果有帮助,我 运行 Laravel 5 在 Mac 与 OSX Mavericks 使用宅基地作为环境。
奇怪的是,我以前有过这个工作,我刚刚开始一个新的 Laravel 项目,突然间它就不能工作了。有谁知道是怎么回事吗?
第一个错误可能是由 body, label, /checkbox label {
中的 /
引起的。删除斜杠,它应该可以工作。
第二个是因为你在使用 @include
而实际上你想要 @import
.
@import
用于包含其他 sass/css 文件。 @include
用于使用 mixin。
我正在尝试使用 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 被编译。
如果有帮助,我 运行 Laravel 5 在 Mac 与 OSX Mavericks 使用宅基地作为环境。
奇怪的是,我以前有过这个工作,我刚刚开始一个新的 Laravel 项目,突然间它就不能工作了。有谁知道是怎么回事吗?
第一个错误可能是由 body, label, /checkbox label {
中的 /
引起的。删除斜杠,它应该可以工作。
第二个是因为你在使用 @include
而实际上你想要 @import
.
@import
用于包含其他 sass/css 文件。 @include
用于使用 mixin。