Sass & Vite: A Guide for Your Next Workflow
Setting up, and optimizing your CSS workflow for efficient web development.
Hi, I'm Jhordy Gavinchu, a Software Engineer with a deep passion for Web Development especially for Frontend Technologies.
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:
# With yarn
yarn create vite
# With npm
npm create vite@latest
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
# With npm from 7+
npm create vite@latest sass-app -- --template vanilla
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
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
# With npm
npm i
After installing the dependencies, start the project and view it in your browser with the command:
yarn dev
# With npm
npm run dev
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
Step 4: Configure Sass
Vite supports CSS preprocessors like Sass. Begin by installing Sass as a project developer dependency:
yarn add sass -D
# With npm
npm i sass -D
Next, you have two options:
Change the file extension of
style.csstostyle.scss(orstyle.sass) and remove all its contents.Delete the
style.cssfile and create a new file namedstyle.scss(orstyle.sass).
You can execute the following bash commands for either option:
# First option
mv src/style.css src/style.scss && echo "" > src/style.scss
# Second option
rm src/style.css && touch src/style.scss
Step 5: Add Sass rules
Inside src/style.scss, create the Sass rules according to your requirements. For example:
// 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:
<!-- 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>
In src/main.js, import the style.scss file to include your Sass code:
// 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:
yarn dev
# With npm
npm run dev
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.
