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

【问题标题】：Laravel 5 elixir: How do I Compile and move .scss files?Laravel 5 elixir：如何编译和移动 .scss 文件？
【发布时间】：2015-02-02 17:06:27
【问题描述】：

我已尝试按照laravel-elixir 的说明进行操作，但我显然仍无法获得它，所以我希望你能以更适合初学者的方式向我解释。

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

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

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

/*! 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');
});

【问题讨论】：

向我们展示你的 gulpfile.js
它只有安装时的默认值。将其添加到问题中。尝试了不同的东西，但是当我运行 gulp 时什么也没发生，最后我放弃了

标签： css laravel sass laravel-5 laravel-elixir

【解决方案1】：

好的，所以我终于知道我错在哪里了。

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

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

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

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

希望这可以帮助像我一样做出同样错误假设的其他人。

【讨论】：