Laravel Gulp Elixir 与 Sass 并包括库答案

【问题标题】：Laravel Gulp Elixir with Sass and including librariesLaravel Gulp Elixir 与 Sass 并包括库
【发布时间】：2015-05-05 16:01:57
【问题描述】：

我刚开始使用 Laravel 5.0，注意到它随 Gulp 一起安装，并且它自己的库叫做 Elixir。看起来不错，但是我在使用 Susy 和 Breakpoint 等库时遇到了问题。

在典型的 Gulp 设置中，我会使用 gulp-ruby-sass 在我的样式任务中像这样使用管道：

.pipe(sass({ style: 'compact', require: ['susy', 'breakpoint'], "sourcemap=none": true }))

但是，我无法用 Elixir 做类似的事情。有没有人遇到过这个问题的解决方案？

目前我的 gulp 文件中的 Elixir 风格任务是这样的：

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

任何建议将不胜感激。

谢谢！

【问题讨论】：

标签： laravel sass gulp susy laravel-elixir

【解决方案1】：

你可以传入node-sass选项作为第三个参数。

elixir.extend('sass', function(src, output, options)

比如……

elixir(function(mix) {
    mix.sass('main.scss', undefined, {
        outputStyle: 'compact'
    });
});

【讨论】：

【解决方案2】：

似乎 susy CSS 框架与 elixir 中的 gulp-sass 开箱即用。我必须安装“laravel-elixir-compas”模块（https://github.com/rynocouse/laravel-elixir-compass）。 elixir 的 Compass 扩展允许您使用 susy 和断点。

你只需要在 config.rb 中定义导入需要“断点” 需要'susy'

然后你应该好好去.. 我有“指南针编译失败！”我可以通过简单地指定 compass.mix() 的选项来修复该错误（请参阅https://github.com/rynocouse/laravel-elixir-compass 以获取选项）

希望对遇到类似问题的人有所帮助

【讨论】：