Search code examples
phplaravelgulpcompass

How to make use of compass in laravel?


With laravel-elixir-compass (and gulpfile.js from README.md) it says:

$ gulp
module.js:340
    throw err;
    ^

Error: Cannot find module 'laravel-elixir/ingredients/helpers/utilities'
    at Function.Module._resolveFilename (module.js:338:15)
    at Function.Module._load (module.js:289:25)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)
    at Object.<anonymous> (/srv/http/sl/node_modules/laravel-elixir-compass/index.js:4:17)
    at Module._compile (module.js:425:26)
    at Object.Module._extensions..js (module.js:432:10)
    at Module.load (module.js:356:32)
    at Function.Module._load (module.js:313:12)
    at Module.require (module.js:366:17)
    at require (module.js:385:17)

So, I concluded it relies on elixir <= 0.9.1, since this is when the file was renamed. And this is the closest commit with bumped version I could find.

Then I noticed "Project has moved" warning in README.md.

With laravel-elixir-sass-compass (and gulpfile.js from README.md):

$ gulp
[00:19:03] Using gulpfile /srv/http/sl/gulpfile.js
[00:19:03] Starting 'default'...
[00:19:03] Starting 'compass'...
[00:19:03] 'compass' errored after 985 μs
[00:19:03] TypeError: Cannot read property 'indexOf' of undefined
    at prefixOne (/srv/http/sl/node_modules/laravel-elixir/GulpPaths.js:104:17)
    at GulpPaths.prefix (/srv/http/sl/node_modules/laravel-elixir/GulpPaths.js:124:12)
    at GulpPaths.src (/srv/http/sl/node_modules/laravel-elixir/GulpPaths.js:24:16)
    at prepGulpPaths (/srv/http/sl/node_modules/laravel-elixir-sass-compass/index.js:46:14)
    at null.definition (/srv/http/sl/node_modules/laravel-elixir-sass-compass/index.js:31:21)
    at Task.run (/srv/http/sl/node_modules/laravel-elixir/Task.js:96:17)
    at Gulp.<anonymous> (/srv/http/sl/node_modules/laravel-elixir/index.js:94:52)
    at module.exports (/srv/http/sl/node_modules/orchestrator/lib/runTask.js:34:7)
    at Gulp.Orchestrator._runTask (/srv/http/sl/node_modules/orchestrator/index.js:273:3)
    at Gulp.Orchestrator._runStep (/srv/http/sl/node_modules/orchestrator/index.js:214:10)
[00:19:03] Error in plugin 'run-sequence'
Message:
    An error occured in task 'compass'.
[00:19:03] Finished 'default' after 9.56 ms

With any path passed (mix.compass('app.sass')):

$ gulp
[00:20:40] Using gulpfile /srv/http/sl/gulpfile.js
[00:20:40] Starting 'default'...
[00:20:40] Starting 'compass'...
[00:20:40] Finished 'default' after 14 ms
[00:20:40] Nothing to compile. If you're trying to start a new project, you have left off the directory argument.
Run "compass -h" to get help.

[00:20:40] gulp-notify: [Laravel Elixir] Compass Compilation Failed!: Compass failed
{ [Error: Compass failed]
  message: 'Compass failed',
  showStack: false,
  showProperties: true,
  plugin: 'gulp-compass',
  __safety: { toString: [Function: bound ] } }
[00:20:40] 'compass' errored after 414 ms
[00:20:40] Error in plugin 'gulp-compass'
Message:
    Compass failed
[00:20:40] Error in plugin 'run-sequence'
Message:
    An error occured in task 'compass'.

Solution

  • As it appears, it just can't find any files to be compiled. So, the basic version of gulpfile.js is to be like so:

    var elixir = require('laravel-elixir'),
        path = require('path');
    
    require('laravel-elixir-sass-compass');
    
    elixir(function(mix) {
        mix.compass('*', 'public/css', {
            sass: 'resources/assets/sass'
        });
    });
    

    Here's the relevant issue.