Laravel Elixir Sass 编译 - .sass 文件

Question

我更喜欢 .sass 语法而不是 .scss 语法（因为它更好，让 war 开始吧！），所以这就是我想要的利用。但是，当尝试使用 Elixir 编译 .sass 文件时，它似乎试图使用 scss 语法进行编译。

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

当styles.sass是

body
  background: black

我收到以下错误：

$ gulp
[17:54:43] Using gulpfile ~/sites/skynet/gulpfile.js
[17:54:43] Starting 'default'...
[17:54:43] Starting 'sass'...
[17:54:43] Finished 'default' after 185 ms
[17:54:43] gulp-notify: [Laravel Elixir] Error: invalid top-level expression
[17:54:43] Finished 'sass' after 198 ms

但将 styles.sass（仍保留 .sass 扩展名）更改为

body {
  background: black;
}

编译成功。 Elixir 只编译 scss 语法还是我缺少某种配置设置？帮助非常感谢！

Answer 1

那是因为 Laravel Elixir 使用 gulp-sass. And the inside of gulp-sass it use node-sass. The node-sass use libsass, which is does not support .sass file https://github.com/sass/libsass/issues/16

您可以使用 gulp-ruby-sass to compile .sass to css. Or use the laravel-elixir-ruby-sass.

Answer 2

感谢 @mul14，我深入研究了 gulp-sass 所依赖的不同库。 github 上的问题是一个讨论，最终导致有人成功支持缩进语法并将其合并到 libsass.

查看 node-sass 的文档后，我发现了 option 用于打开缩进语法。查看 Elixir 的 sass 成分参数，这对我有用！

elixir(function(mix) {
  mix.sass('styles.sass', false, { indentedSyntax: true });
});

所以，最后是配置问题。全球缩进语法用户的好消息！

Laravel Elixir Sass 编译 - .sass 文件

Laravel Elixir Sass Compilation - .sass files

sass

laravel

laravel-elixir