Migrated to @use and @forward - no longer getting 'Error: Undefined variable.' errors. Task hangs.

[paulmist]

Issue

I've just started using @use and @forward in my projects and mostly succeeding.

I'm using Gulp to process the files.

However, I'm finding that if I accidentally misspell a variable or make a simple syntax error (eg. accidentally delete a bracket) and save the gulp task I'm running hangs and throws no error.

I'd expect something like (what I used to get with @import)…

Error in plugin "sass"
Message:
    scss/_module.scss
Error: Undefined variable.
   ╷
26 │     background-color: $pinks;
   │                       ^^^^^^^^^^^

But instead the task simply hangs and I have to restart it.

Files

My file structure is…

style.scss
scss/
├─ _index.scss
├─ _variables.scss
├─ _main.scss
├─ _module.scss

styles.scss

@use "scss/main";
@use "scss/module";

_index.scss

@forward "variables";

_main.scss

@use "index" as *;

…code here…

_module.scss

@use "index" as *;

…code here…

_variables.scss

@use "sass:color";
@use "sass:math";

// Colors
$pink     : #F9F1ED;
$green    : #87A793;

Gulpfile

"use strict";

	const gulp  = require('gulp'),
	browsersync = require('browser-sync').create(),
	sass        = require('gulp-sass')(require('sass')),
	notify      = require('gulp-notify'),
	cssnano     = require('gulp-cssnano');

const supported = [
	"defaults"
];

// BrowserSync
function browserSync(done) {
	browsersync.init({		
		proxy: 'https://xxxxxxxxx',
		port: 3000,
		open: false

	});
	done();
}

// BrowserSync Reload
function browserSyncReload(done) {
  browsersync.reload();
  done();
}

//Watch
function watchFiles(){
	gulp.watch("style.scss", scss);
	gulp.watch("./scss/*.scss", scss);
	gulp.watch("./js/*.js").on('change', browsersync.reload);
	gulp.watch("./*.php").on('change', browsersync.reload);
	gulp.watch("./template-parts/*.php").on('change', browsersync.reload);
}

function scss(){
	return gulp
	.src("style.scss")
	.pipe(sass({
		style: 'compressed'
	}).on('error', sass.logError))
	.pipe(cssnano({
		zindex: false,
		autoprefixer: {browsers: supported, add: true}
	}))
	.pipe(gulp.dest("."))
	.pipe(notify("Compiled: <%= file.relative %>"))
	.pipe(browsersync.stream());
}

const serve = gulp.parallel(watchFiles, browserSync);

exports.serve = serve;

[nex3]

When I replicate your setup and run Sass from the command line, I see an error as expected. What makes you think this is an issue with Sass and not with Gulp's plugin? Is there some specific aspect of the Sass API that's not behaving correctly?

[paulmist]

Thanks for taking a look.

To be honest, I'm not sure what the cause would be. My set up hasn't changed, only the introduction of @use and @forward. Project still using @import still work as expected.

What else can I provide you with to help work this out?

[nex3]

If you can reproduce it using only the Sass CLI or the pure Sass JS API, then post that reproduction and I can take a look. Otherwise, report this to the maintainer of Gulp's Sass plugin. They'll either be able to fix the issue there or determine what calls they're making to the Sass API that aren't behaving as they should.

[paulmist]

I'll see what I can do - haven't tried the above before so might take me a minute.

I have also reported this to the Gulp Sass plugin repo - so far no uptake/interest.

[paulmist]

To update:

I tried compiling a test case with the SASS CLI and I get an appropriate error. The issue must be elsewhere!