I was working on some scss, in a project that has a working environment with sass compiling and half way through editing a sass file I noticed the changes stopped being compiled. There are no sass errors (other than some linting warnings that were there before). Looked in the output folder and the css files simply are no longer being overwritten with the new scss contents.
JS compilation still works as expected so this seems like an internal sass, node-sass or gulp-sass module issue.
This issue was replicated by a colleague, both of us are on macOS Catalina and BigSur.
We're running:
node 12.13.0 npm 6.12.0
Sass related packages:
"gulp": "4.0.0", "gulp-sass": "4.1.0", "gulp-sass-glob": "^1.0.9", "gulp-sass-lint": "^1.4.0",
Dev gulp task
function devStyles() {
return src(`${paths.src.scss}/**/*.scss`)
.pipe(sourcemaps.init())
.pipe(sassGlob())
.pipe(sass({ outputStyle: 'expanded' }))
.pipe(postcss(postcssPlugins))
.pipe(sourcemaps.write('.'))
.pipe(dest(paths.dist.css));
}
We tried a bunch of things like, downgrading packages, different sass settings, clearing gulp cache folders. Obviously clearing the browser cache doesn't work.