【问题标题】:Laravel Elixir Sass Compilation - .sass filesLaravel Elixir Sass 编译 - .sass 文件
【发布时间】:2023-11-09 06:36:01
【问题描述】:

我更喜欢 .sass 语法而不是 .scss 语法(因为它更好,让战争开始吧!),所以这就是我想要使用的。但是,当尝试使用 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 语法还是我缺少某种配置设置?非常感谢您的帮助!

【问题讨论】:

  • 经过一些实验,我发现它只使用.scss语法编译sass目录中的资产。好纠结的小伙子!人们会期望sass 目录包含.sass 文件,反之亦然...

标签: laravel sass laravel-elixir


【解决方案1】:

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

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

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

所以,最终这是一个配置问题。全球缩进语法用户的好消息!

【讨论】:

    【解决方案2】:

    那是因为 Laravel Elixir 使用了gulp-sass。而 gulp-sass 的内部则使用 node-sass。 node-sass使用libsass,不支持.sass文件https://github.com/sass/libsass/issues/16

    您可以使用gulp-ruby-sass 将.sass 编译为css。或使用laravel-elixir-ruby-sass

    【讨论】: