Automatically Compiling Your Sass CSS with Laravel Elixir

CSS Elixir

Committed to the LaraBrain by: wjgilmore (@wjgilmore) at October 27, 2015 7:49 pm

Learn how to quickly recompile your Laravel project Sass CSS without manual intervention

Laravel encourages you to use Sass for CSS management by including an app.scss file in resources/sass. The Sass file can then be compiled through Elixir and the results saved to public/css/app.css by adding the following line to your project gulpfile.js:

elixir(function(mix) {

With the mix.sass statement in place, you can compile app.scss at will by running gulp:

$ gulp

However, constantly returning to the terminal to recompile your Sass will quickly become a drag, and so you can tell Gulp to instead "watch" for changes and automatically recompile by executing Gulp like so:

$ gulp watch

Make a quick change to your app.scss file and after saving the changes you'll see they'll be automatically recompiled!