React Sass Styling

React Sass Styling: Writing Maintainable SCSS in React

Sass (Syntactically Awesome Style Sheets) extends standard CSS with variables, nested selectors, mixins, and reusable partials. In modern React builds powered by Vite or Next.js, you can enable .scss files and scoped .module.scss stylesheets simply by installing the sass compiler package.

Setting Up Sass in React

Install sass as a development dependency—no extra Vite plugins or webpack config changes are needed. After installation, import .scss or .module.scss files straight into your components.

npm install -D sass

/* _tokens.scss */
$brand-blue: #2563eb;
$radius-md: 8px;

/* ActionButton.module.scss */
@use './tokens' as t;

.button {
  background-color: t.$brand-blue;
  color: #ffffff;
  border-radius: t.$radius-md;
  padding: 10px 18px;
  border: none;

  &:hover {
    opacity: 0.9;
  }
}

import styles from './ActionButton.module.scss';

export function ActionButton({ label, onClick }) {
  return (
    <button type="button" className={styles.button} onClick={onClick}>
      {label}
    </button>
  );
}

Prefer @use Over Legacy @import

Modern Dart Sass deprecates @import because it pollutes the global namespace and compiles duplicate CSS rules. Use @use './tokens' as t; so variables and mixins stay explicitly namespaced per stylesheet.

Common Sass Mistakes in React

• Deep Selector Nesting: Nesting five levels deep (.card .header .title span a) produces brittle, high-specificity CSS that is hard to override. Keep nesting under three levels.
• Installing Deprecated node-sass: node-sass fails to compile on modern Node.js releases. Always install the official Dart Sass package (sass).

Frequently Asked Questions

Can I combine Sass with CSS Modules?

Yes. Name your file Component.module.scss and Vite compiles the Sass first, then scopes the generated class names automatically.

Should I use Sass variables or CSS custom properties (--var)?

Use CSS custom properties (--brand-color) for runtime theme switching (such as dark mode), and Sass variables or mixins for compile-time helpers.

Does Sass run in the user's browser?

No. Vite compiles .scss files into standard .css files during the build step, so browsers download plain CSS.