Using Sass in React

When you build a React application, you have many options for styling: plain CSS files, the style attribute, CSS Modules, and Sass.

Sass is still a very popular option, loved by many developers. You write SCSS, which looks like regular CSS plus variables and nesting, and the browser gets plain CSS.

The easiest way to start a React app today is with Vite. Vite supports Sass out of the box, so you only need to add the Sass compiler itself.

Let’s create an app:

npm create vite@latest my-app -- --template react
cd my-app
npm install

Then install Sass as a dev dependency:

npm install -D sass-embedded

Vite looks for sass-embedded first. It talks to the Dart Sass compiler running as a native program, so it’s usually faster.

The sass package, the pure JavaScript version, works too:

npm install -D sass

Pick one. You don’t need both.

Now create a src/styles.scss file:

$brand: #ff4b0a;

.card {
  padding: 2rem;

  h1 {
    color: $brand;
  }
}

and import it in a component, like src/App.jsx:

import './styles.scss'

export default function App() {
  return (
    <main className="card">
      <h1>Hello from Sass</h1>
    </main>
  )
}

Run npm run dev and the heading is orange. Vite compiled the SCSS to CSS and injected it into the page.

If you forget to install the compiler, the build stops with this error:

Error: Preprocessor dependency "sass-embedded" not found. Did you install it? Try `npm install -D sass-embedded`.

Install one of the two packages and restart the dev server.

Sharing variables with @use

As your styles grow, you’ll want to keep your variables in one file and use them everywhere.

Put them in a partial, a file whose name starts with an underscore, like src/_colors.scss:

$brand: #ff4b0a;

Then load it with @use. The variables are available under the file name:

@use 'sass:color';
@use 'colors';

.card {
  h1 {
    color: colors.$brand;
  }

  &__button {
    background: colors.$brand;
    color: white;

    &:hover {
      background: color.adjust(colors.$brand, $lightness: -10%);
    }
  }
}

Older tutorials use @import and functions like darken(). They still compile, but the current Sass prints a deprecation warning for each one. @use and the sass:color module replace them.

Sass and CSS Modules

Vite also handles CSS Modules written in Sass. Give the file a .module.scss extension:

@use 'colors';

.title {
  color: colors.$brand;
}

and import it as an object:

import styles from './Card.module.scss'

export default function Card() {
  return <h1 className={styles.title}>Hello</h1>
}

The class name gets a unique suffix, so .title in this file can’t clash with a .title somewhere else.

Legacy Create React App projects

Warning: Create React App is deprecated. Use this only if you maintain an existing CRA project.

Create React App supports Sass since version 2. Install the compiler with npm install sass, then import the .scss file in a component, the same way:

import './styles.scss'

Older CRA projects used the node-sass package instead. It’s deprecated, and the CRA docs point to sass now, so if you find node-sass in package.json, swap it for sass.

Want me to talk about your product? You can sponsor this site.