Search code examples
csssassgulpgulp-sass

Why is gulp compiling my SCSS files in alphabetical order?

I've never had this happen before, and I usually use the same gulpfile. All of my SCSS files are compiling alphabetically, which means things aren't being overridden properly. Here's the compiling message. (note, I've blacked out my client's name)

enter image description here

This is my style.scss file

//Mixins
@import 'mixins';

//Globals
@import 'config';
@import 'global/global';

//Header
@import 'global/header';

//Company
@import 'company/leadership';


//Social buttons
@import 'social/social_buttons';

@import 'company/contact-us';

@import 'company/events-listing';

//Active Data Fabric tweak
@import 'active/active-data-fabric';

// News CPT Single
@import 'news/single';

//Resource Listing
@import 'resources/listing';

//Resource Single
@import 'resources/single';

//Products
@import 'products/products';

//Featured Testimonials
@import 'featured_testimonials/index';

//Videos Page
@import 'videos/index';

//Header Override
@import 'resources/header';

//Support Page
@import 'support/overview';

// Careers Page
@import 'company/careers';

//Search Page
@import 'search/index.scss';

// Import Views
@import 'views/home';

And here is my gulpfile

var gulp = require('gulp');
var minifycss = require('gulp-cssnano');
var autoprefixer = require('gulp-autoprefixer');
var notify = require('gulp-notify');
var sass = require('gulp-ruby-sass');
var concat = require('gulp-concat');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('css', function() {
    return sass('scss/**/*.scss')
        .pipe(sourcemaps.init())
        .pipe(autoprefixer())
        .pipe(concat('style.css'))
        .on('error', sass.logError)
        .pipe(minifycss())
        .pipe(sourcemaps.write(''))
        .pipe(gulp.dest('./scss'))
            .pipe(notify({ message: 'Wait for it....wait for it!!!' }));
});

gulp.task('default', function() {
    gulp.watch('scss/**/*.scss',['css']);
});

Like I said, this has never happened before, so I'm at a loss. Shouldn't the files compile according to the order specified in the style.scss file?

Solution

  • Your **/*.scss wildcard picks up files alphabetically. Since the ** recurses to the bottom of the directory structure, it returns the directories alphabetically, with the files in each also sorted alphabetically.

    That's the expected output of the wildcard.