Using Sass with Vite in React

Sass is a popular preprocessor scripting language that is used to write more organized and structured CSS code. It adds features like variables, nesting, and mixins to CSS, making it easier to code and maintain stylesheets. In this tutorial, we will learn how to use Sass in a React project with Vite, a build tool that provides a fast development environment for modern web projects.

Step 1: Create a new React project with Vite

To get started, you need to have Node.js installed on your machine. If you don’t have it installed, you can download and install it from the official Node.js website.

Next, open your terminal and run the following command to install Vite globally:

npm install -g create-vite

Now, create a new React project with Vite by running the following command:

create-vite my-react-app --template react

Replace "my-react-app" with the name of your project. This command will create a new React project with Vite as the build tool.

Step 2: Install Sass

Next, navigate to the root directory of your project and install Sass by running the following command:

npm install sass

This will install the Sass package in your project.

Step 3: Configure Sass in your project

To configure Sass in your project, you need to create a new file named vite.config.js in the root directory of your project. Open this file and add the following code:

import { defineConfig } from 'vite'

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/styles/variables.scss";`
      },
    },
  },
})

This code configures Vite to use Sass as the preprocessor for CSS files. It also imports a file named variables.scss from the src/styles directory, which we will create in the next step.

Step 4: Create a Sass file

Now, create a new directory named styles inside the src directory of your project. Inside the styles directory, create a new file named variables.scss and add some Sass code to it, such as variables or mixins. For example:

$primary-color: #3498db;
$secondary-color: #2c3e50;

Step 5: Import Sass styles in your React components

To use Sass styles in your React components, you need to import the variables.scss file in your component’s CSS or Sass file. For example, if you have a styles.scss file in the src directory, you can import the variables.scss file like this:

@import "./styles/variables.scss";

body {
  background-color: $secondary-color;
  color: $primary-color;
}

You can now write your styles using Sass features like variables and mixins in your React components.

Step 6: Start the development server

To start the development server, run the following command in your terminal:

npm run dev

This will start the Vite development server and open your project in the browser. You can now start writing your React components and styling them with Sass.

In this tutorial, we have learned how to use Sass in a React project with Vite. Sass makes it easier to write and maintain CSS code by adding features like variables, nesting, and mixins. By following the steps in this tutorial, you can set up Sass in your React project and start using it to style your components.