Gulp Sass not compiling partials

Question

So I am using Gulp Sass with gulp-changed (i\'ve also tried gulp-newer with the updated syntax changes) and watching all the scs

Answer 1

This is an excellent question. I had faced this problem and get rid of that after a huge amount of time. Because there was no such things I found online at that time to get rid of that.

• sass

  • abstracts
    • _base.scss
  • base
  • components
  • layout
  • pages
  • themes
  • vendors
• main.scss

main.scss

@import 'sass/abstracts/base';

const gulp = require('gulp');
const sass = require('gulp-sass');
const rename = require('gulp-rename');
const browserSync = require('browser-sync');
const gulpSequence = require('gulp-sequence');
const sassInheritance = require('gulp-sass-inheritance');
const filter = require('gulp-filter');
var cached = require('gulp-cached');
var gulpif = require('gulp-if');


gulp.task('sass', function() {
    return gulp.src('sass/main.scss')

    
    //filter out unchanged scss files, only works when watching
    .pipe(gulpif(global.isWatching, cached('sass')))
 
    //find files that depend on the files that have changed
    .pipe(sassInheritance({dir: 'sass'}))
    
    .pipe(filter(function (file) {
        return !/\//.test(file.path) || !/^_/.test(file.relative);
      }))


    .pipe(sass())
    .pipe(rename('style.compile.css'))
    .pipe(gulp.dest('css/'))
    .pipe(browserSync.stream());
})

gulp.task('serve', ['sass'], function () {
    browserSync.init(
        {
            server: "./"
        }
    );

    gulp.watch('sass/abstracts/**/*.scss', ['sass']);;
    gulp.watch('index.html').on('change', browserSync.reload);
});

Run gulp serve.