Jami Gibbs
Written by Jami Gibbs who lives and works in Chicago as a developer.   You should follow her on Twitter 👋

Getting Sass Running Quickly In Your React + Webpack Project

November 04, 2018

There are a lot of resources that explain how to add Sass to a React project using Webpack but many of them are complicated, assume a particular file structure, or are maybe focusing too much on optimization from the start. I found myself going round-and-round a few of those resources and all I was really looking for was the easiest possible way to get Sass running in a quick side project I was working on.

There’s just a few simple steps:

  1. Install required NPM packages

There are three packages you’ll need to install for us to compile our sass file(s):

npm install style-loader css-loader sass-loader --save-dev

  1. Add the scss rule to Webpack

In your webpack.config.js file, add a module rule for compiling sass with the previously installed packages:

{
 test: /\.scss$/,
 use: [ 'style-loader', 'css-loader', 'sass-loader' ]
}

Your webpack config file might look a little different but here’s mine as an example. You can see that I’ve added a new scss test under the module key:

const isDev = process.env.NODE_ENV === 'development'
module.exports = {
mode: isDev ? 'development' : 'production',
entry: [
'@babel/polyfill', // enables async-await
'./client/index.js'
],
output: {
path: __dirname,
filename: './public/bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader'
},
{
test: /\.scss$/,
use: [
'style-loader',
'css-loader',
'sass-loader'
]
}
]
}
}
view raw webpack.config.js hosted with ❤ by GitHub

  1. Create your sass files and import them in components.

In my situation, I just created a parent styles folder within my app and added a main scss file where I could put global styles:

app/styles/main.scss

Example app file structure:

.
├── client
|   └── index.js
├── public
├── script
├── server
├── styles
|   └── main.scss
├── package.json
└── webpack.config.js

For the global style, add your main scss stylesheet to the top of your project’s entry point. In my case, that was client/index.js. When we do this, those styles will get loaded down through the application components.

import '..styles/main.scss'

For individual components, create separate stylesheets and import it at the top of the component:

.
├── client
|   └── index.js
|   └── components
|       └── navbar.js
|       └── navbar.scss
├── public
├── script
├── server
├── styles
|   └── main.scss
├── package.json
└── webpack.config.js

import './navbar.scss'
import React from 'react'
const Navbar = () => (
<div>
/* Navigation bar stuff goes here */
</div>
)
export default Navbar
view raw navbar.js hosted with ❤ by GitHub

That’s it!

Conclusion

Is there a more efficient way of doing this? Probably. Are there other opinions on how to structure your app or optimize the stylesheets? Likely. But if you’re just trying to put together a quick POC or have a fun side project you’re working on, these are three easy steps to get Sass, Webpack, and React working together quickly so you can keep moving forward with your project.