Auto recompile fail in compiling multiple files

[dtvn]

I've 2 files need to compile at the same time:

• mods.scss
• main.scss

gulp.task('sass', () => {
    const opt = {
        // fiber for gulp-dart-sass
        fiber: fiber,
        outputStyle: 'compressed'
    };

    return gulp.src(scss)
        .pipe(sass(opt).on('error', sass.logError))
        .pipe(rename(path => {
            switch (path.basename) {
                case 'main': path.basename = 'style'; break;
                default:
            }
        }))
        .pipe(gulp.dest(pub));
});

I put this task to gulp.watch. It did combine both files, when I run watch task. However, it only recompile everything if I save the main.scss. If I change content in mods.scss and save, nothing will change. In order to make it compiled, I have to save a file that relative to the main.scss.

Any ideas guys?

[svenvandescheur]

I'm seeing similar behaviour. I have multiple levels of sass files. Screen.css includes components/_all.scss which includes header/_all.scss which includes _header.scss (example):

screen.css
components/
    header/
        _header.scss
        _all.scss
    _all.scss

Whenever i alter screen.scss gulp watch runs correctly, whenever I change something in a nested file it runs but without an actual result.

My sass task is defined like this:

function scss() {
    return gulp.src(paths.sassSrc)
        .pipe(gulpif(sourcemap, sourcemaps.init()))
        .pipe(sass(eyeglass.options).on("error", sass.logError))
        .pipe(postcss(plugins))
        .pipe(gulpif(sourcemap, sourcemaps.write('./')))
        .pipe(gulp.dest(paths.cssDir));
}

and watch:

function watchSCSS() {
    scss()
    gulp.watch(paths.sassSrc, scss);
}

[ajayns]

Oops, I wasn't aware this issue was open. I'm facing a similar one, where the changes to imported files are not reflected on the dev server (except for a flash of updated styles after which it goes back).

Any solutions to this found?

Detailed info and config: #764

[kuzivany]

I also faced this issue, but after a lot of search engine queries I stumbled upon the gulp-sass-inheritance plugin.

After experimenting I found that the usage example was too verbose and all I needed was the following snippet:

const { src, dest, watch } = require('gulp')
const sassInheritance = require('gulp-sass-inheritance')
const sass = require('gulp-sass')

function css () {
    return src('src/styles/**/*.scss')
        .pipe(sassInheritance({ dir: 'src/styles/' }))
        .pipe(sass())
        .pipe(dest('dist/css'))
}

function watchCss () {
    watch('src/styles/**/*.scss', { ignoreInitial: false }, css)
}

exports.css = css
exports['watch:css'] = watchCss

I assume if you have a relatively large project the usage example will be helpful