Search code examples
laravelsassgulpgulp-sasslaravel-elixir

Specify input directory for Laravel Elixir/SASS

I currently have my resources/assets directory structured a bit differently from normal as I want to have a number of "themes" in my project.

Currently I have the following structures:

resources/assets/theme-one/scss/*
resources/assets/theme-one/coffee/*

And

resources/assets/theme-two/scss/*
resources/assets/theme-two/coffee/*

Now I'm trying to build my gulpfile.js using Elixir (For theme-one currently) and I'm trying to specify the input directory for my SASS files.

var elixir = require('laravel-elixir');

elixir(function(mix) {
    mix.sass(['app.scss'], 'public/theme-one/css/app.css');
});

Of course, the above code will look at the resources/assets/sass directory by default but I want to tell it to look in the resources/assets/theme-one/scss directory instead.

I've tried all kinds of different combinations to try and get it to work but it seems that no matter what I try, Elixir/gulp-sass is always trying to look in resources/assets/sass and I get File not found: resources\assets\sass\app.scss errors.

I've tried:

  • Adding a third parameter, specifying the input directory
  • Specifying a full path to the file in relation to my gulpfile.js i.e. resources/assets/theme-one/scss/app.scss
  • Switching round the second and third parameters
  • Digging into the source code (https://github.com/laravel/elixir/blob/master/tasks/sass.js and https://github.com/laravel/elixir/blob/master/GulpPaths.js) to try and find out how to specify an input directory.
  • Prefixing the app.scss in parameter 1 with a ./ and full path (From the comment and the code starting at line 97 in GulpPaths.js, explaining that prefixing the path with a ./ would essentially skip the prefixing)

I'm having no luck at all. Any ideas?

The only "solution" I could think of would be to change my project structure back to how Elixir wants it, i.e. have resources/assets/sass/theme-one/app.scss and resources/assets/coffee/theme-one/app.coffee etc. but that's not something I want to do. If all else fails I suppose I could just bin Elixir and just use gulp as is.

Edit

I've now tried changing the assetsPath config item in my gulpfile.js like this:

var elixir = require('laravel-elixir');

elixir.config.assetsPath = "resources/assets/theme-one";
elixir.config.publicPath = "public/theme-one";

elixir(function(mix) {
    mix.sass(['app.scss']);
});

I'm still getting File not found: resources/assets/sass/app.scss

Solution

  • You can override the default config of Elixir (public and assets):

    //in your gulp file : 
var elixir = require('laravel-elixir');

elixir.config.assetsPath = "resources/assets/theme-one";
elixir.config.publicPath = "public/theme-one";

elixir(function(mix) {
    mix.sass('app.scss');
});

elixir.config.assetsPath = "resources/assets/theme-two";
elixir.config.publicPath = "public/theme-two";

elixir(function(mix) {
    mix.sass('app.scss');
});

    Watch out, for older versions (before 3.0) of Elixir you need to override the config like so :

    elixir.config.assetsDir = "resources/assets/theme-one";
elixir.config.publicDir = "public/theme-one";

    As pointed out in the comments by Jonathon