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. 

React component generator

July 4, 2017 | Javascript, Web Development

Someone recently asked me if there was a way to generate React components. While there are plenty of generators to create full React projects (such as using Yeoman or create-react-app), there aren’t any tools (that I’m aware of) for quickly building out a new, blank component.

This inspired my curiosity, so I spent the better part of an afternoon building out a Node CLI app to quickly generate components. The tool, react-gc, accepts one argument, the component name, but also has flags for additional options, including specifying the directory path ( if you don’t want to create the component in the current directory ), specifying whether the component is basic or stateful, and including the Redux function mapStateToProps and mapDispatchToProps.

I originally built the CLI using more of the Node fs-extra  API for reading, writing, and copying files using Promises instead of callbacks, but it seemed to be throwing a lot of errors. Aside from that, building the templates as strings in a JS file and exporting them to the CLI made it much easier to manipulate how the templates are built.

Check out the repository on Github here.

If you’re interested in building CLIs for Node, check out the tutorial I followed, written by Tim Pettersen.

Questions or comments? Leave ’em below or raise an issue on the repository!


Ion Slide Box Tabs

A plugin I built for the Ionic framework. This directive extends Ionic framework V1’s ion-slide-box with selectable tabs and a tab indicator that moves as the user changes slides.

I kept the styling simple so feel free to modify the CSS / SCSS as necessary for your project.

I will hopefully be releasing an API soon, as well as some updates to this directive!

Check out the repository here: https://github.com/cassaram09/ion-slide-box-tabs

Automated Git Project Deployment

November 11, 2016 | Personal Projects, Web Development

While there are plenty of apps that can handle deployment for you (such as Heroku) or Beanstalk (for general workflow control and project deployment), with a simple script you can automate your Git project deployment to be as easy as typing a few words into your terminal! In this post I’ll walk you through how to set up automated git project deployment.

Continue reading “Automated Git Project Deployment”

Flatiron School Graduation

October 21, 2016 | Web Development

1 year ago, I started teaching myself how to code.

8 months ago, I started part time at Flatiron School’s Online Web Development program.

6 months ago, I left my job as Operations Manager at a digital agency to pursue this career path full time.

3 months ago, I started my own company for website development to leverage my skills from previous job and the new ones I was learning.

This week, I officially graduated from Flatiron School and am proud to be a Full Stack Web Developer!

Continue reading “Flatiron School Graduation”

Music Gear Share

A gear sharing app built with AngularJS and Rails

MusicGearShare is a Craig’s List style application where users can sign up and share their music equipment with each other, including anything ranging from instruments, accessories, sound equipment, and more. After signing up, users can search gear thats available to rent and messages each other to coordinate sharing and renting.

Continue reading “Music Gear Share”

Writing better Git commit messages

September 27, 2016 | Web Development

Using Git is a crucial part of most developers’ workflows, and so is writing committing messages for the changes they make. As a newer developer, I did some research into what make a good commit message and how I can improve my commits. Having clear, concise, and sufficiently detailed messages in critical when working on a project and even more so when working with other developers.

Continue reading “Writing better Git commit messages”