Laravel 5 elixir：如何编译和移动 .scss 文件？

Question

我已经尝试按照 laravel-elixir 上的说明进行操作，但我显然还不太了解它，所以我希望你能以对初学者更友好的方式向我解释它。

我想使用 elixir 从 resources/assets/scss/styles.scss 编译我的 scss，然后将文件输出到 public/styles.css。

如何设置 .scss 文件的自定义路径？文件输出在哪里，所以我可以 .copy() 到 public?

我的 styles.scss 看起来像这样（是的，总共有 2 个资产文件夹。Laravels 和我自己的）：

/*! Testing Elixir */
//assets
@import 'assets/cssReset';
@import 'assets/variables';
@import 'assets/mixins';

//layouts
@import 'layouts/base';
@import 'layouts/dashboard';
@import 'layouts/logo';
@import 'layouts/forms';
@import 'layouts/siteNavigation';

@import 'layouts/lesson';
@import 'layouts/course';
@import 'layouts/courseList';
@import 'layouts/courseNavigation';

@import 'layouts/landingPage1';
@import 'layouts/landingPage2';

@import 'layouts/pagination';
@import 'layouts/footer';

//userMenu
@import 'layouts/menu';

如果 gulp 在运行时在命令行中提供某种反馈，那将非常有帮助。

我的gulp.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');
});

Answer 1

好吧，我终于知道错在哪里了。

我认为 mix.sass('app.sass'); 中的 app 是一个路径变量，而 .相当于 / like 使用 blade 目录分隔符，然后 sass 是文件夹名称。原来 app.sass 是一个文件名。嗯...

当我将我的路径重命名为：resources/assets/sass 然后指定：

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

Gulp 在此处输出文件：public/css/styles.css

希望这对其他和我一样做出同样错误假设的人有所帮助。

Laravel 5 elixir：如何编译和移动 .scss 文件？

Laravel 5 elixir: How do I Compile and move .scss files?

css

laravel

sass

laravel-5

laravel-elixir

我的gulp.js