# Sass & Vite: A Guide for Your Next Workflow

> Updated on: March 2025

In this tutorial, I will guide you through the process of creating a Vite project that leverages the power of [Sass](https://sass-lang.com/) for efficient and streamlined styling. Vite is a fast-build tool designed to enhance development speed, while Sass is a CSS preprocessor that offers a range of powerful features. By integrating Sass into your [Vite](https://vitejs.dev/) project, you can optimize your CSS workflow and boost your productivity.

## Prerequisites

Before we begin, ensure that the following are installed on your system:

* [Node.js](https://nodejs.org/) (along with either yarn or npm)
    
* [Visual Studio Code](https://code.visualstudio.com/) (optional)
    
* A shell (also known as a command line interface), such as Bash or PowerShell.
    

# What is Vite

Vite is a versatile package build tool that offers multiple templates for different frameworks and programming languages. The templates available include Vanilla, Vue.js, React, Preact, Lit, Svelte, Solid, and Qwik with JavaScript or TypeScript.

## Step 1: Initialize a Vite Project

### Assistant way

Open your command line interface and run the following command:

```bash
# With yarn
yarn create vite

# With npm
npm create vite@latest
```

<div data-node-type="callout">
<div data-node-type="callout-emoji">☝</div>
<div data-node-type="callout-text">The console will prompt you to install the '<code>create-vite</code>' package if you haven't already. If you're using <strong>Yarn</strong>, it will self-install; however, if you're using <strong>npm</strong>, it will ask for your confirmation before proceeding.</div>
</div>

Follow the assistant's prompts and provide the project name, select the Vanilla framework, and choose the JavaScript variant.

### Rapid way

To create a project swiftly, run the following command:

```bash
yarn create vite sass-app --template vanilla

# With npm from 7+
npm create vite@latest sass-app -- --template vanilla
```

<div data-node-type="callout">
<div data-node-type="callout-emoji">👀</div>
<div data-node-type="callout-text">Please be aware that the project name is set as '<code>sass-app</code>'. Feel free to replace it with your preferred name, but ensure you're cautious throughout the subsequent steps, as I'll continue to refer to the project as '<code>sass-app</code>'.</div>
</div>

## Step 2: Open the Project

Navigate to your project directory using the command line:

```bash
cd sass-app
```

You can also open the project directly in VSCode with the following command:

```bash
code sass-app
```

<div data-node-type="callout">
<div data-node-type="callout-emoji">☝</div>
<div data-node-type="callout-text">If you're using VSCode, you have the option to utilize the integrated terminal for the upcoming steps.</div>
</div>

## **Step 3:** Install Dependencies and Run

So when you view the project, you can advise the following project structure:

```markdown
sass-app/
├── public/
│   ├── vite.svg
├── src/
│   ├── counter.js
│   ├── javascript.svg
│   ├── main.js
│   ├── style.css
├── .gitignore
├── index.html
├── package.json
```

Now install the necessary dependencies by running:

```bash
yarn install

# With npm
npm i
```

After installing the dependencies, start the project and view it in your browser with the command:

```bash
yarn dev

# With npm
npm run dev
```

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">The console will display pertinent information, including the URL for local development, which might appear as <strong>http://localhost:5173</strong>.</div>
</div>

For the next steps, we need to remove unnecessary files from the template. Delete the files marked with "❌" and empty the files marked with "🔄".

```markdown
sass-app/
├── public/
│   ├── vite.svg ❌
├── src/
│   ├── counter.js ❌
│   ├── javascript.svg ❌
│   ├── main.js 🔄
│   ├── style.css
├── .gitignore
├── index.html 🔄
├── package.json
```

Use the following bash command:

```bash
rm public/vite.svg src/counter.js src/javascript.svg \
  && echo "" > index.html && echo "" > src/main.js
```

<div data-node-type="callout">
<div data-node-type="callout-emoji">☝</div>
<div data-node-type="callout-text">If you prefer, you can also employ a visual file manager for this task, or simply use Visual Studio Code.</div>
</div>

## **Step 4: Configure Sass**

Vite supports CSS preprocessors like Sass. Begin by installing Sass as a project developer dependency:

```bash
yarn add sass -D

# With npm
npm i sass -D
```

Next, you have two options:

* Change the file extension of `style.css` to `style.scss` (or `style.sass`) and remove all its contents.
    
* Delete the `style.css` file and create a new file named `style.scss` (or `style.sass`).
    

You can execute the following bash commands for either option:

```bash
# First option
mv src/style.css src/style.scss && echo "" > src/style.scss

# Second option
rm src/style.css && touch src/style.scss
```

<div data-node-type="callout">
<div data-node-type="callout-emoji">☝</div>
<div data-node-type="callout-text">If you prefer, you can also employ a visual file manager for this task, or simply use Visual Studio Code.</div>
</div>

## Step 5: Add Sass rules

Inside `src/style.scss`, create the Sass rules according to your requirements. For example:

```scss
// src/style.scss

@use "sass:color";

$primary-color: #aa866a;
$secondary-color: #40646c;
$text-color: #fff;

.container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  background-color: color.scale($primary-color, $lightness: 20%);

  h1 {
    color: $secondary-color;
  }

  p {
    color: $text-color;
  }
}
```

In `index.html`, create the HTML structure for your project. For example:

```xml
<!-- index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sass Project</title>
    <script type="module" src="main.js" defer></script>
  </head>
  <body>
    <main class="container">
      <h1>Hello, Sass!</h1>
      <p>This is a simple example of using Sass with HTML.</p>
    </main>
  </body>
</html>
```

<div data-node-type="callout">
<div data-node-type="callout-emoji">☝</div>
<div data-node-type="callout-text">The most important part of this HTML code is the script tag, which is required to import sass code</div>
</div>

In `src/main.js`, import the `style.scss` file to include your Sass code:

```javascript
// src/main.js

import './style.scss'
```

## **Run Your Vite Project**

Now that your project is set up with Sass, use the following command to run it:

```bash
yarn dev

# With npm
npm run dev
```

<div data-node-type="callout">
<div data-node-type="callout-emoji">💡</div>
<div data-node-type="callout-text">The console provides essential information, including the local development URL, such as <a target="_blank" rel="noopener noreferrer nofollow" href="http://localhost:5173/" style="pointer-events: none">http://localhost:5173/</a>.</div>
</div>

## **Outro**

Congratulations! You have successfully created a Vite project with Sass integration. By combining the speed and efficiency of Vite with the powerful features of Sass, you can enhance your CSS workflow and build stunning web applications. Feel free to explore more of Vite's capabilities and experiment with your Sass styles.

## **Bonus ⭐**

The code is now available on GitHub as a [template repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-repository-from-a-template#creating-a-repository-from-a-template). You can clone it and use it as a starting point for your projects. [Check it out here](https://github.com/jhordyess/vanilla-sass-boilerplate).

### Useful Extra Links:

* [https://vitejs.dev](https://vitejs.dev)
    
* [https://sass-lang.com](https://sass-lang.com)

%%[saltenha]