CSS Modules with SASS/SCSS

Around hundreds of css options (styled-components, tailwind, emotion, sass and bunch of others) you’ve decided to start your project with CSS modules. Congratulations!

The main goal of the CSS Modules, similar to Styled Components, is to create globally unique styles to avoid CSS collision across projects. You can import your CSS classes easily in JS with CSS Modules.

CSS modules feel like Vanilla CSS without CSS class name clash. As you expect other alternatives have some pros over CSS Modules like passing data from JS to CSS.

What is ComponentName.module.scss ?

You can use CSS Modules with SASS too. SASS has some extra features over Vanilla CSS like defining variables, nesting selectors and custom rules. If you want to leverages this advantages with CSS Modules here is how can you implement it:

Create project with :

npx create-react-app my-app

Add ‘sass’ package to your project. (Node-sass is deprecated sass is suggested from now on)

npm install sass

Now you can create X.module.scss files around your project.

Example:

/* Button.module.scss */
$primary-color: #4d5b9e;

.ibutton {
  padding: 1rem 1.5rem;
  margin-top: 3rem;
  border: none;
  background-color: $primary-color;
  color: white;
  border-radius: 20px;
}

import React from "react";
import styles from "./Button.module.scss";

export default function Button() {
  return (
      <button className={styles.ibutton}>
        iButton
      </button>
  );
}

🚑🚑 Example: https://github.com/akursat/css-modules 🚑🚑