Skip to main content

Sass/SCSS

Sass is a CSS preprocessor, which adds special features such as variables, nested rules and mixins (sometimes referred to as syntactic sugar) into regular CSS.

Create React App allows you to import Sass using both the .scss and .sass extensions. You can use component-level Sass via CSS Modules and the .module.scss or .module.sass extension.

To style your components using CSS Modules, name your stylesheet files with the [name].module.scss.

components/header/index.module.scss
.header {  background-color: #20232A;
  title {    color: #96CBEF;  }
  &:hover {    background-color: #2C3946;  }}
components/header/index.tsx
import React from "react";
import styles from "./index.module.scss";
export const Header: React.FC = () => {  return (    <div className={styles.header}>      <title>Title<title>    </div>  );};

Adding Tailwind CSS to your project later#

npm install sass
tip

You can customize Bootstrap if UI framework chosen as Bootstrap along with Sass during creation phase. Bootstrap’s source Sass files added to under src/styles folder directory.