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:

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

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

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.