Gulp Sass компилирует в css не в том порядке, который указан в основном scss файле. Как это исправить?

Question

N!crO @n1croo

Front-end developer

Sass

Gulp Sass компилирует в css не в том порядке, который указан в основном scss файле. Как это исправить?

Вот gulpfile.js:

'use strict';

var gulp = require("gulp"),
    watch = require('gulp-watch'),
    runSequence = require('run-sequence'),
    browserSync = require('browser-sync').create(),
    del = require("del"),
    rename = require("gulp-rename"),
    plumber = require('gulp-plumber'),
    sass = require("gulp-sass"),
    jade = require('gulp-jade'),
    csso = require('gulp-csso'),
    imagemin = require('gulp-imagemin'),
    svgstore = require('gulp-svgstore'),
    svgmin = require('gulp-svgmin'),
    uglify = require('gulp-uglify'),
    rigger = require('gulp-rigger'),
    combineMq = require('gulp-combine-mq'),
    autoprefixer = require('gulp-autoprefixer');

var path = {
    build: {
        html: 'build/',
        js: 'build/js/',
        css: 'build/css/',
        img: 'build/img/',
        fonts: 'build/fonts/',
        favicon: 'build/'
    },
    src: {
        html: 'src/html/*.jade',
        js: 'src/js/script.js',
        style: 'src/style/style.scss',
        img: 'src/img/*.{jpg,png,gif,svg}',
        svg: 'src/img/svg-icon/*.svg',
        fonts: 'src/fonts/**/*.*',
        favicon: 'src/*.{png,ico,xml,svg,json}'
    },
    watch: {
        html: 'src/html/**/*.jade',
        js: 'src/js/**/*.js',
        style: 'src/style/**/*.scss',
        img: 'src/img/*.{jpg,png,gif,svg}',
        svg: 'src/img/svg-icon/*.svg',
        fonts: 'src/fonts/**/*.*'
    },
    clean: './build'
};

gulp.task('html:build', function () {
    return gulp.src(path.src.html)
      .pipe(plumber())
      .pipe(jade({
         pretty: true
      })) 
      .pipe(gulp.dest(path.build.html)) 
      .pipe(browserSync.stream());
});

gulp.task('js:build', function() {
    return gulp.src(path.src.js)
      .pipe(rigger())
      .pipe(gulp.dest(path.build.js))
      .pipe(uglify())
      .pipe(rename("script.min.js"))
      .pipe(gulp.dest(path.build.js))
      .pipe(browserSync.stream());
});

gulp.task('style:build', function() {
    return gulp.src(path.src.style)
      .pipe(plumber())
      .pipe(sass())
      .pipe(autoprefixer())
      .pipe(combineMq({
        beautify: true
      }))
      .pipe(gulp.dest(path.build.css))
      .pipe(csso())
      .pipe(rename("style.min.css"))
      .pipe(gulp.dest(path.build.css))
      .pipe(browserSync.stream());
});

gulp.task('image:build', function() {
    return gulp.src(path.src.img)
      .pipe(imagemin([
        imagemin.jpegtran({progressive: true}),
        imagemin.optipng({optimizationLevel: 3}),
      ]))
      .pipe(gulp.dest(path.build.img))
      .pipe(browserSync.stream());
});

gulp.task("sprite:build", function() {
    return gulp.src(path.src.svg)
      .pipe(svgmin())
      .pipe(svgstore({
        inlineSvg: true
      }))
      .pipe(rename("symbols.svg"))
      .pipe(gulp.dest(path.build.img));
});

gulp.task('fonts:build', function() {
    return gulp.src(path.src.fonts)
      .pipe(gulp.dest(path.build.fonts));
});

gulp.task('favicon:build', function() {
    return gulp.src(path.src.favicon)
      .pipe(gulp.dest(path.build.favicon));
})

gulp.task("clean", function() {
    return del("build");
});

gulp.task('build', function(fn) {
    runSequence(
      'clean',
      'html:build',
      'js:build',
      'style:build',
      'fonts:build',
      'favicon:build',
      'sprite:build',
      'image:build',
      fn
    );  
});

gulp.task('serve', function() {
    browserSync.init({
        server: {
            baseDir: "./build"
        }
    });

    watch([path.watch.html], function(event, cb) {
        gulp.start('html:build');
    });
    watch([path.watch.style], function(event, cb) {
        gulp.start('style:build');
    });
    watch([path.watch.js], function(event, cb) {
        gulp.start('js:build');
    });
    watch([path.watch.img], function(event, cb) {
        gulp.start('image:build');
    });
    watch([path.watch.svg], function(event, cb) {
        gulp.start('sprite:build');
    });
    watch([path.watch.fonts], function(event, cb) {
        gulp.start('fonts:build');
    });
});

и style.scss

@import 'helpers/_normalize.scss';
@import 'helpers/_variables.scss';
@import 'helpers/_placeholders.scss';
@import 'helpers/_mixins.scss';
@import 'helpers/_scaffolding.scss';
@import 'pages/header.scss';

скомпилированный css:

/* NORMALIZE */

html {
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,aside,footer,header,nav,section {
  display: block;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

figcaption,figure,main {
  display: block;
}

figure {
  margin: 1em 40px;
}

hr {
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

b,strong {
  font-weight: inherit;
}

b,strong {
  font-weight: bolder;
}

code,kbd,samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

dfn {
  font-style: italic;
}

mark {
  background-color: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

audio,video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

button,input,optgroup,select,textarea {
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,input {
  overflow: visible;
}

button,select {
  text-transform: none;
}

button,html [type="button"],[type="reset"],[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],[type="radio"] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details,menu {
  display: block;
}

summary {
  display: list-item;
}

canvas {
  display: inline-block;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

/* SCAFFOLDING */

*,*::after,*::before {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', Helvetica, sans-serif;
  font-size: 15px;
  line-height: 30px;
}

a {
  color: #000;
  text-decoration: none;
}

/* HEADER */

.index-header .container {
  max-width: 1160px;
  margin: 0 auto;
  padding: 32px 60px 160px;
  background-color: #f7e296;
  position: relative;
  top: 40px;
  z-index: 1;
}

/* SCAFFOLDING */

@font-face {
  font-family:'Open Sans';src:url("../fonts/opensans.woff2") format("woff2"), url("../fonts/opensans.woff") format("woff");font-weight:400;font-style:normal;
}

@font-face {
  font-family:'Open Sans';src:url("../fonts/opensanslight.woff2") format("woff2"), url("../fonts/opensanslight.woff") format("woff");font-weight:300;font-style:normal;
}

@font-face {
  font-family:'Gilroy';src:url("../fonts/gilroyextrabold.woff2") format("woff2"), url("../fonts/gilroyextrabold.woff") format("woff");font-weight:800;font-style:normal;
}

@font-face {
  font-family:'Gilroy';src:url("../fonts/gilroylight.woff2") format("woff2"), url("../fonts/gilroylight.woff") format("woff");font-weight:300;font-style:normal;
}