如何让 Laravel Elixir 合并我的文件而不是覆盖它们？

Question

我的应用程序中有两个样式表，名为 Main.scss 和 Reset.css。我尝试编译 Sass，然后将其与其他样式表 (Reset.css) 合并，但我最终错过了 Main.scss 中的样式。在我决定添加 Reset.css.

之前，它一直运行良好

这是我的 gulpfile:

var elixir = require('laravel-elixir');
var assetsDir = 'public/Assets/Stylesheets/';
elixir.config.sourcemaps = false;

/*
 |--------------------------------------------------------------------------
 | 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 Sass
 | file for our application, as well as publishing vendor resources.
 |
 */

elixir(function(mix) {
  mix.sass('Main.scss', assetsDir + 'Main.css')
    .styles('Reset.css', assetsDir + 'Main.css')
    .version('Assets/Stylesheets/Main.css');
});

如何使 Reset.css 简单地合并到与 Main.css 相同的文件中而不覆盖 .sass 调用的内容？

这是调用 gulp 的日志，还有：

[21:24:18] Using gulpfile ~/Code/gulpfile.js
[21:24:18] Starting 'default'...
[21:24:18] Starting 'sass'...

Fetching Sass Source Files...
   - resources/assets/sass/Main.scss


Saving To...
   - public/Assets/Stylesheets/Main.css

[21:24:20] Finished 'default' after 1.87 s
[21:24:20] gulp-notify: [Laravel Elixir] Sass Compiled!
[21:24:20] Finished 'sass' after 1.98 s
[21:24:20] Starting 'styles'...

Fetching Styles Source Files...
   - resources/assets/css/Reset.css


Saving To...
   - public/Assets/Stylesheets/Main.css

[21:24:20] gulp-notify: [Laravel Elixir] Stylesheets Merged!
[21:24:20] Finished 'styles' after 41 ms
[21:24:20] Starting 'version'...

Fetching Version Source Files...
   - public/Assets/Stylesheets/Main.css


Saving To...
   - public/build

[21:24:20] Finished 'version' after 45 ms

Answer 1

您正在用 sass 创建 Main.css，但随后立即用 Reset.css 覆盖它。 styles 方法用于连接不同的样式表，您可以将其指定为数组作为第一个参数。

所以你会说

.styles(['Reset.css', 'Main.css'], assetsDir + 'Main.css')

不过在那种情况下，它将在资源目录中查找 Main.css。您可以通过提供第二个参数来覆盖 .mix 函数保存您的 Main.css。

例如

mix.sass('Main.scss', 'resources/assets/css/Main.css')
   .style(['Main.css','Reset.css'], assetsDir + 'all.css']

如何让 Laravel Elixir 合并我的文件而不是覆盖它们？

How do I make Laravel Elixir merge my files rather than overwrite them?

css

laravel

gulp

laravel-elixir