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 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 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 (along with either yarn or npm)
Visual Studio Code (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:
yarn create vite
npm create vite@latest
☝
The console will prompt you to install the 'create-vite' package if you haven't already. If you're using Yarn, it will self-install; however, if you're using npm, it will ask for your confirmation before proceeding.
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:
yarn create vite sass-app --template vanilla
npm create vite@latest sass-app -- --template vanilla
👀
Please be aware that the project name is set as 'sass-app'. 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 'sass-app'.
Step 2: Open the Project
Navigate to your project directory using the command line:
cd sass-app
You can also open the project directly in VSCode with the following command:
code sass-app
☝
If you're using VSCode, you have the option to utilize the integrated terminal for the upcoming steps.
Step 3: Install Dependencies and Run
So when you view the project, you can advise the following project structure:
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:
yarn install
npm i
After installing the dependencies, start the project and view it in your browser with the command:
yarn dev
npm run dev
💡
The console will display pertinent information, including the URL for local development, which might appear as http://localhost:5173.
For the next steps, we need to remove unnecessary files from the template. Delete the files marked with "❌" and empty the files marked with "🔄".
sass-app/
├── public/
│ ├── vite.svg ❌
├── src/
│ ├── counter.js ❌
│ ├── javascript.svg ❌
│ ├── main.js 🔄
│ ├── style.css
├── .gitignore
├── index.html 🔄
├── package.json
Use the following bash command:
rm public/vite.svg src/counter.js src/javascript.svg \
&& echo "" > index.html && echo "" > src/main.js
☝
If you prefer, you can also employ a visual file manager for this task, or simply use Visual Studio Code.
Vite supports CSS preprocessors like Sass. Begin by installing Sass as a project developer dependency:
yarn add sass -D
npm i sass -D
Next, you have two options:
You can execute the following bash commands for either option:
mv src/style.css src/style.scss && echo "" > src/style.scss
rm src/style.css && touch src/style.scss
☝
If you prefer, you can also employ a visual file manager for this task, or simply use Visual Studio Code.
Step 5: Add Sass rules
Inside src/style.scss, create the Sass rules according to your requirements. For example:
@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:
<!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>
☝
The most important part of this HTML code is the script tag, which is required to import sass code
In src/main.js, import the style.scss file to include your Sass code:
import './style.scss'
Run Your Vite Project
Now that your project is set up with Sass, use the following command to run it:
yarn dev
npm run dev
💡
The console provides essential information, including the local development URL, such as
http://localhost:5173/.
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. You can clone it and use it as a starting point for your projects. Check it out here.
