Search code examples
csslaravelsasslaravel-5laravel-elixir

Laravel 5 elixir: How do I Compile and move .scss files?

I have tried to follow the instructions at laravel-elixir, but I'm apperantly still to green to get it, so I hope you can explain it to me in a more beginner-friendly way.

I want to use elixir to compile my scss from resources/assets/scss/styles.scss and then output the file to public/styles.css .

How do I set the custom path to my .scss file? Where is the file outputted, so I can .copy() it to public?

My styles.scss looks like this (yes, there are 2 assets folders in total. Laravels and my own):

/*! Testing Elixir */
//assets
@import 'assets/cssReset';
@import 'assets/variables';
@import 'assets/mixins';

//layouts
@import 'layouts/base';
@import 'layouts/dashboard';
@import 'layouts/logo';
@import 'layouts/forms';
@import 'layouts/siteNavigation';

@import 'layouts/lesson';
@import 'layouts/course';
@import 'layouts/courseList';
@import 'layouts/courseNavigation';

@import 'layouts/landingPage1';
@import 'layouts/landingPage2';

@import 'layouts/pagination';
@import 'layouts/footer';

//userMenu
@import 'layouts/menu';

It would be really helpfull if gulp gave some kind of feedback in the commandline when run.

My gulp.js

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

/*
 |--------------------------------------------------------------------------
 | 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 Less
 | file for our application, as well as publishing vendor resources.
 |
 */

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

  • Okay, so I finally figured where I went wrong.

    I thought app in mix.sass('app.sass'); was a path variable, and . was the equivalent to / like with blade directory seperators, and then sass was the folder name. It turned out app.sass was a filename. Do'h...

    When I renamed my path to: resources/assets/sass and then specified:

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

    Gulp outputted the file here: public/css/styles.css

    Hope this helps others that makes the same false assumptions like me.