CODEWITHSUNDEEP
csssassgulp
Kellen
Kellen

Reputation: 1032

Gulp compiling sass out of order

I'm having issues with Gulp compiling my sass out of the order that I'm dictating in my sass files.

Here's an example of my file structure for one of my sass components: enter image description here

Within my general-page.scss file, I compile _desktop.scss, _mobile.scss and _tablet.scss in this order:

@import 'mobile';

@media ($bp-tablet) {
  @import 'tablet';
}

@media ($bp-desktop) {
  @import 'desktop';
}

However, in my styles.css, it's injecting my _tablet.scss after my _desktop.scss, which is causing my tablet breakpoint to override my desktop breakpoint.

@media (min-width:1140px) {
    .node--type-general-page .hero-headings h1 {
        font-size: 3em
    }
    .node--type-general-page .hero-headings .subhead {
        font-size: 1.3em
    }
    .node--type-general-page .hero,
    .node--type-general-page .hero-background,
    .node--type-general-page .hero-background img {
        height: 250px
    }
}
@media (min-width:768px) {
    .node--type-general-page .hero,
    .node--type-general-page .hero-background,
    .node--type-general-page .hero-background img {
        height: 220px
    }
}

Here's my gulp file:

// Initialize modules
const { src, dest, watch, series, parallel } = require('gulp');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const concat = require('gulp-concat');
const postcss = require('gulp-postcss');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const uglify = require('gulp-uglify');

// File path variables
const files = {
    scssPath: 'app/styles.scss',
    scssSubPaths: 'app/**/*.scss',
    jsPath: 'app/js/*.js'
}

// Sass task
function scssTask(){
    return src(files.scssPath)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(postcss([ autoprefixer(), cssnano() ]))
        .pipe(sourcemaps.write('.'))
        .pipe(dest('dist')
    );
}

// JS task
function jsTask(){
    return src(files.jsPath)
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(dest('dist')
    );
}

// Watch task
function watchTask(){
    watch([files.scssPath, files.scssSubPaths, files.jsPath],
        parallel(scssTask, jsTask)
    );
}

// Default task
exports.default = series(
    parallel(scssTask, jsTask),
    watchTask);

Am I doing something wrong?

UPDATE: Oddly, we've had no issues with our other sass components. For example, we tested another component, nested at the same level as the general-page component. Gulp compiled that component in the correct order. We've run through the code numerous times, but there's no obvious reason why this component is being compiled out of order. It follows the exact same structure as our other components.

Upvotes: 1

Views: 878

Answers (2)

ChickenSoups
ChickenSoups

Reputation: 975

Your **/*.scss wildcard picks up folder and files alphabetically, so the _tablet.scss will be place after the _desktop.scss. It sound like you have duplicated .scss content, if you have a general-page.scss why you need to include all .scss file.

Upvotes: 0

Terrence
Terrence

Reputation: 139

From what I gather from the limited information, I think that your SASS subpaths are being compiled in alphabetical order.

I would consider only compiling the "style.scss" file and importing all your subpath files inside of your main file.

Upvotes: 1

Related Questions