Originally published 6.9.17 — Last updated 10.2.18 Final Update: Create App 2.0 has officially been released. It includes and CSS Modules out of the box. Check it out here: React Sass https://reactjs.org/blog/2018/10/01/create-react-app-v2.html Introduction If you’ve been using React for any length of time you’re probably well aware of the project. If you’re not familiar, Create React App (CRA) provides a handy CLI for spinning up a boilerplate React app. By typing you can have a bootstrapped app running in a couple minutes. One thing you can’t do easily, is change the configuration of CRA. That is by design. Essentially the team has decided on a configuration they like and bundled it all together. The underlying config files aren’t exposed until you run to eject the config. Some folks love this, some do not. Naturally, on the internet, there are opinions. Personally I really like being able to quickly spin up an app without spending a bunch of time setting up Webpack the same way, every time, or customizing a folder structure etc. Create React App create-react-app my-app yarn run eject The one area that some folks, myself included, seem to struggle with is that CRA doesn’t ship with any CSS tools. This is also by design. My assumption is that the team behind CRA didn’t want to play favorites or build for every CSS tool: (Sass, Less, etc.). So it’s up to the user to add them in. You can run the script to get access to the Webpack config, and add in Sass loaders, but once you you can never go back. This means you could, potentially, lose out on painless upgrades to CRA in the future. eject eject Other options? Sass is a preprocessor that is taking our files and compiling them to . Sass also lets you a folder for changes and compile your styles on the fly to . This gives us an option for using Sass with CRA. We’ll configure Sass to watch our folder and export files that we’ll in our CRA. Essentially CRA will never know that we’re using Sass at all. .scss .css --watch .css scss css import Getting Started: UPDATE: I’ve created an updated demo repo with CRA 1.5.2 running React 16. It can be found here. To get started, we’ll need to install Sass and then make some adjustments to the default file structure. Sass is a gem so you’ll need to install Ruby if you haven’t already. Ruby comes installed by default on Mac and (I believe) some Linux distros. If you’re running Windows, you can use . To install Sass you can run: from your terminal. Ruby Ruby Installer gem install sass Don’t want to install Ruby? A few folks have pointed out that it is not required to install Ruby to get Sass running. You have options like , and the suggests using . The method I’m outlining below is what is suggested in the . When I started playing around with adding Sass to CRA it wasn’t documented in the Readme and I hadn’t gone back to revisit the docs recently. node-sass CRA-Readme node-sass-chokidar Sass docs Update: I’ve added support to the Simply check out or fork the branch. More info about node-sass is available in the readme on the demo repo. node-sass demo repo. node-sass File structure changes: #new-folder: src/styles#new-folder: src/styles/css#new-folder: src/styles/scss#rename/move index.css: src/styles/scss/index.scss#rename & move App.css: src/styles/scss/App.scss Our folder should now look like this: /src Next we’ll update our file to import from the correct location. We need to change the line to Our file should now look like: src/index.js index.css import './index.css' import './styles/css/index.css' index.js We can also remove the line from the file. Our file should now look like: import ‘./App.css' App.js App.js We don’t currently an file, we’ll get to that in a moment. Note: have index.css Let’s update the file. By default it has a small block of styling. I prefer to move that into the file, but you could create a file and move it there if you’d rather. These are the default styles that ship with CRA, and you’ll likely overwrite them later anyways. Our file only needs to import our other Sass partials. After moving the style block to another file, our file should only have and if you opted to create that file. index.scss body App.scss Body.scss index.scss body index.scss @import ‘App’ @import 'Body' Our index.scss file We’re going to use the Sass mode to keep an eye on our scss folder zand have it compile our stylesheets to the css folder for us. To do that, we’ll add a script to the file. watch package.json : "sass --watch src/styles/scss:src/styles/css" "sass" This tells Sass to watch the scss folder and compile output to the css folder. Now we simply open a 2nd tab in our terminal of choice and to start watching/compiling our scss to css. yarn run sass That’s all we need to get started! To fire up your app you’ll need to open a couple terminal processes. In one you’ll run to start the dev server and in another you’ll run to start Sass in watch mode. yarn start yarn run sass Disclaimers: Yeah, I know, it’s not awesome that this configuration means you’ll have to have 2 processes running in the terminal while you’re developing. You’ll need the dev server along with the process. I’ve not found a good way around this. I’ve seen ways to automate opening separate processes but it’s all dependent on the terminal environment you’re in. I’ve not found anything universal. 2 terminal processes?! sass --watch At some point, you’re going to forget to start up the Sass process. Then you’re going to pull your hair out and probably say some choice words while you try to figure out why the changes you’re making aren’t being reflected in the browser. Just know that it’ll happen. The other bad part: Moving on! The first time we run our new Sass process we’ll get a bunch of new files in our css folder: src/styles/css/App.css  
  src/styles/css/App.css.map  
  src/styles/css/Body.css  
  src/styles/css/Body.css.map  
  src/styles/css/index.css  
  src/styles/css/index.css.map The good news is that we never have to look inside the css folder and therefore we don’t have to care that there are so many files being created. The other good news is that Sass is smart enough to recognize changes and build new files as needed so even if you make a bunch of new files and changes before running the script, once you do, it’ll output all your new files for you. sass css One last step I would recommend: add to your file. Sass uses local cache files to track your changes, and you probably don’t want those in your repo. .sass-cache .gitignore That’s it! If you run now you should have the default CRA screen showing and looking just as it should. If you want to double-check that your Sass files are indeed being compiled properly, be sure to run and then maybe add a to the body. yarn start yarn run sass background-color A note about building for production/deployment: Because we are using Sass to transpile our scss files to css files, CRA is completely unaware that we’re even writing scss. Using these methods will have no impact to the default build and deployment process of a CRA app. One thing I’ve done, on more than one occasion, is forget to transpile my stylesheets before running a new build. This is annoying. To get around this, I suggest adding another script to your that will do a one-time build of your styles: package.json _“sass:build”_: “sass — update src/styles/scss:src/styles/css”, I would then suggest updating the script to: build _”build”_: “yarn sass:build && react-scripts build”, This gives you one less thing to think about. Your stylesheets will automatically transpile before the build process happens. Final Thoughts: For just a little bit of extra configuration, we get to have our cake and eat it too. We get to quickly build React apps using CRA and we get to enjoy the styling benefits that come with using Sass. Let me know if you found this to be useful. Thanks for reading! is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising & sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories

BUNCH

Facebook

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Using Sass with Create React App V1 (Without Ejecting)

Too Long; Didn't Read

Companies Mentioned

Jeff Duke

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Using Sass with Create React App V1 (Without Ejecting)

Too Long; Didn't Read

Companies Mentioned

Jeff Duke

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES