css - 如何让 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']