How to incorporate SASS into a react project

I installed Sass (via gem install sass) and have tried creating a style.scss file in my directory. I imported it in, but am not having any luck affecting my app’s styles. Do I have to have something in the package.json file to process it?

How do you usually import a scss file for use?

Well by itself a .scss file does nothing. It has to be “compiled” into a .css file and then included like you would normally include a css-file into your index.html (link tag). You need a build tool like grunt or gulp (or even something like webpack) to have it compiled for you. That is the easiest way to get the css into your app.
If you really want to be able to just do “import ‘./style.css’” to use your styles you will need to look into webpack and its loaders, in this case style-loader, css-loader and sass-loader.

EDIT: Ok, actually you don’t NEED a build tool to compile it. You could do that by hand but a build tool automates the process and can actually “watch” files for changes and autocompile and stuff.

EDIT2: Have a look at https://github.com/webpack-contrib/sass-loader if webpack piques your interest

3 Likes

Thank you so much Kim, I appreciate your response. I feel so dumb for thinking the SCSS just magically would work.

###for anyone in the future who might stumble on this question:

I was using create-react-app, and the way I incorporated the SASS was through their documentation here. That watches the build too so as you save changes it immediately updates.

1 Like

You’re very welcome, Mathew - glad I could help. :slight_smile: