Compile entire SCSS folder into single css file

Question

My goal is to have webpack compile all of my scss files in my styles folder into a single bundle.css file.

All of the tutorials that I've seen so far require that I either import all of the files into a single scss file and then compile that, or use require("filename.scss") in the javascript file.

Is is possible to automatically traverse all of the subfolders in the styles directory and produce a single output file without declaring or importing each file?

Answer 1

There's a reason most tutorials rely on @import rules. Creating the base SCSS file that imports your others is an important step - that's where you determine the order that your styles are incorporated into the compiled CSS.

If you were to let a folder of .scss files be automatically combined into one .css, you could have many issues down the line if you wanted to import normalize.css , a reset file or vendor/plugin styles - those could unknowingly be altering or replacing styles you'd written.