Gulp-Sass compiling multiple stylesheet files ? Here’s why.
Intro
After resolving a big head scratcher situation trying to figure out why gulp continues to create multiple stylesheets, I decided to write this blog to help someone who’s also wondering why !
Gulp is a widely used automation toolkit, and one of its use is to compile multiple stylesheets into one file which can be compressed and imported to use on the website. But there are cases depending on your project requirements, maybe you need multiple stylesheet files that need to be imported to the website.
Root cause — File naming
In my situation, all I needed was to compile all the .scss files into one final .css file. Below is a snapshot of all the files in my source folder. Note that most of the file names are starting with underscores, but some are without.
Unexpected Result
Because of some files not starting with underscores, sass by design creates partials. And the end result is we get 3 style sheets after executing gulp-sass task.
The Fix
Simply rename all the .scss files to start with underscores apart from one file, i.e. style.scss so that upon gulp-sass task the final result will be just a single stylesheet file named style.css
