How To Include SASS In Your React Project

Styling components in React has gotten a bit weird recently.

Remember back in the day when people would talk about the separation of style (css), content (html) and logic (js, php etc)? This was used as an argument against inline styles like the following:

<span style="color: red;">Hello world</span>

With React, styles are often commingled with component logic:

const styles = {
  color: "red"
};
const HelloWorld = () = (
  <div style={styles}>Hello world</div>
)

But you can achieve some degree of separation by keeping presentational, pure components separate from container components.

SASS Without Webpack

You can use parcel-bundler to bundle React projects without any configuration.

npm i parcel-bundler --save
npm i babel-preset-env babel-preset-react babel-plugin-transform-runtime babel-plugin-transform-class-properties --dev

Then you can include sass by simply importing it:

// Component.js
import React from 'react'
import './styles.scss';
class MyComponent extends React.Component { ... }

When building, parcel-bundler autodetects sass imports and will automatically install node-sass.

Using SASS With Webpack

I'm a big fan of SASS. The idea of programmatic CSS is pretty sexy.

Here's how to use SASS with React and Webpack in three easy steps.

Step 1. Install sass-loader

npm i sass-loader node-sass webpack --save-dev

You'll also need style-loader and css-loader:

npm i style-loader css-loader --save-dev

Step 2. Include sass-loader in your Webpack config file

module.exports = {
  entry: "./app/entry", // string | object | array
  // Here the application starts executing
  // and webpack starts bundling
  output: {
  // options related to how webpack emits results
    path: path.resolve(__dirname, "dist"), // string
    // the target directory for all output files
    // must be an absolute path (use the Node.js path module)
    filename: "bundle.js", // string
    // the filename template for entry chunks
  },
  module: {
    rules: [{
        test: /\.scss$/,
          use: [{
            loader: "style-loader"
          }, {
            loader: "css-loader" 
          }, {
            loader: "sass-loader"
          }]
    }]
  }

How It Works:

• module: { rules: [{ test: /.scss$/ }] }. Webpack uses a regular expression to determine which files it should look for and serve to a specific loader. In this case any file that ends with .scss will be served to sass-loader first (sass to css), then css-loader, and finally style-loader.

Step 3. Include the SASS file in a container component

Usually, you'd include the SASS file in the entry component for your app.

import React from 'react'
import './style.scss'
class App extends React.Component {
  render() {
    return(<div>Hello World</div>)
  }
}

This is a assuming you have a directory structure like this:

|--app.js
|--style.scss
|--components/
|--containers/

Per usual, in style.scss you can import your other sass files like so:

@import 'buttons';
@import 'modal';

And so on.

Resources

• Official Webpack Asset Management Docs

Complete Webpack Config Example For Sass

var path = require('path');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [{
      test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
    }]
  }
}