CODEWITHSUNDEEP
csslaravelgulplaravel-elixir
IIllIIll
IIllIIll

Reputation: 504

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

There are two stylesheets within my application named Main.scss and Reset.css. I try to compile the Sass, then merge it with the other stylesheet (Reset.css) but I end up missing the styles from Main.scss. It was working perfectly well until I decided to add Reset.css.

Here's my 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');
});

How can I make Reset.css simply merge into the same file as Main.css without overwriting the content from the .sass call?

Here's the log from calling gulp, also:

[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

Upvotes: 2

Views: 540

Answers (1)

timgvandijk
timgvandijk

Reputation: 439

You are creating you Main.css with sass, but then immediately overwriting it with Reset.css. The styles method is there to concatenate different stylesheets, which you can specify as an array as the first argument.

So you would say 

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

In that case though, it will look for Main.css in the resources directory. You can overwrite were the .mix function saves your Main.css by giving a second argument.

So for example

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

Upvotes: 2

Related Questions