CSS preprocessors have many cool features such as mixins, nesting, and importing other files that allow for more powerful and organized styling. Although the general rule of thumb in React is to completely segregate components and their styles so they can work independently, which lessens the power of many css preprocessing features, you may still find yourself wanting to use a preprocessor, in this case Sass, for features such as style nesting. This tutorial will show you how!
Starting the Project
First off, we’ll need to start a create-react-app application. I have a quick tutorial here that walks you through the setup. It only takes a few minutes!
Install node-sass
To use Sass, all you need to do is install the node-sass node module. To do that, open up a terminal, navigate into your project folder and run this command:
npm install --save node-sass
Conclusion
Once that has installed, you can go through and rename all of your stylesheets from .css to .scss, although both will work fine. You may now use .scss files wherever you’d like!
Thanks for the read, happy styling!