Loading and Compiling SASS in React

I’ve been looking for a good solution for using SASS in a create-react-app. Previously I was using node-sass-chokidar for watching my scss files and compiling them, but I found it to be unintuitive and difficult to use with my file structure. I decided to build my own workflow for easily loading and compiling SASS files in my React projects using my favorite build tool, Gulp.

This article assumes a familiarity with Gulp and create-react-app and have already set up a project.

Let’s check out how our Gulpfile works.

Our first task, sass,  compiles and minifies our master stylesheet into a css file.

The next task, loadSass,  recursively examines all of the folders in our specified path pattern and collects the path names of any file ending with .scss. We pass the property {read: false} because we don’t need the contents of each file – only the path name.  Then, for each file path, we transform it into a string, like @import "./src/app/components/friend/friend.scss";. We then inject that value into our stylesheet – more on that later.

The last task watches for changes in our sass path and calls the compiling task sass. We could also call our loadSass function here but it would be unnecessary to re-inject our files every time we make a change. Instead, we run  loadSass manually in our terminal when we’ve added new files or moved files around.*

Next, we’ll need to configure our stylesheet to work with gulp-inject:

Next, we’ll need to modify our project’s package.json file to use our new scripts. I ejected my config files and scripts but with some tweaking you should be able to get the following code to work in your package.json file.

We’ve added two new scripts to run: watch-scssand build-scss. The first  loads our SCSS files on boot, and auto compiles our project’s SCSS files during development. The second loads and compiles our SCSS before running the create-react-app build processes.

You won’t need to require the SCSS stylesheet in your component files but I do recommend storing them in the same folder.

Another great thing about this method is that it doesn’t produce any unnecessary CSS files – everything is loaded into a master stylesheet and then that stylesheet is compiled into CSS. No more @imports all over the place either!

And that’s all there is to it! Enjoy a simple way to keep your SCSS files organized and compile them easily during your next React project.

*In another project, I did add support for injecting new files into the stylesheet when a new file is added. I’ll link to that in another post. 

Leave a Reply

Your email address will not be published. Required fields are marked *