How to Use Sass in React: Simple Setup and Example

To use Sass in React, install sass via npm and import .scss files directly into your React components. React scripts handle compiling Sass to CSS automatically, so you can write nested styles and variables in your .scss files and see them applied in your app.

Syntax

First, install Sass in your React project using npm install sass. Then create a .scss file with your styles. Import this file in your React component using import './styles.scss';. React will compile Sass to CSS behind the scenes.

Example parts explained:

• npm install sass: Adds Sass compiler to your project.
• styles.scss: Your Sass stylesheet with nested rules, variables, etc.
• import './styles.scss';: Loads styles into your React component.

bash, scss, jsx

npm install sass

// styles.scss
$primary-color: #4caf50;

.container {
  background-color: $primary-color;
  padding: 1rem;
  .title {
    font-weight: bold;
    color: white;
  }
}

// App.jsx
import React from 'react';
import './styles.scss';

export default function App() {
  return (
    <div className="container">
      <h1 className="title">Hello Sass in React!</h1>
    </div>
  );
}

Example

This example shows a React component styled with Sass. The styles.scss file defines a color variable and nested styles. Importing it in App.jsx applies those styles to the component.

scss, jsx

// styles.scss
$main-bg: #282c34;
$text-color: #61dafb;

.app {
  text-align: center;
  background-color: $main-bg;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: $text-color;
  font-family: Arial, sans-serif;

  .header {
    font-size: 2rem;
    margin-bottom: 1rem;
  }
}

// App.jsx
import React from 'react';
import './styles.scss';

export default function App() {
  return (
    <div className="app">
      <header className="header">Welcome to React with Sass!</header>
      <p>Styles are loaded from a Sass file.</p>
    </div>
  );
}

Output

A full-page centered container with dark background and light blue text reading "Welcome to React with Sass!" and a paragraph below.

Common Pitfalls

Common mistakes when using Sass in React include:

• Not installing sass package, so imports fail.
• Using .sass syntax instead of .scss without configuring the compiler.
• Forgetting to import the Sass file in the component.
• Using global class names without scoping, causing style conflicts.

Always use .scss files and import them in your components. Avoid legacy .sass syntax unless configured.

jsx

// Wrong: no sass installed
import './styles.scss'; // Error: Cannot find module

// Right: install sass first
// npm install sass
import './styles.scss';

Quick Reference

Summary tips for using Sass in React:

• Run npm install sass once per project.
• Create .scss files for styles.
• Import Sass files directly in React components.
• Use Sass features like variables, nesting, and mixins freely.
• React scripts handle compiling Sass automatically.

Key Takeaways

Install the 'sass' package to enable Sass support in React projects.

Write styles in '.scss' files and import them directly into React components.

React scripts automatically compile Sass to CSS without extra setup.

Use Sass features like variables and nesting to organize styles better.

Avoid forgetting to import Sass files or using unsupported '.sass' syntax.