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

☝

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

# With npm from 7+
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
├── .gitignore
├── counter.js
├── index.html
├── javascript.svg
├── main.js
├── package.json
├── style.css

Now install the necessary dependencies by running:

yarn

# 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

💡

The console will display pertinent information, including the URL for local development, which might appear as 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 ❌
├── .gitignore
├── counter.js ❌
├── index.html 🔄
├── javascript.svg ❌
├── main.js 🔄
├── package.json
├── style.css

Use the following bash command:

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

☝

If you prefer, you can also employ a visual file manager for this task, or simply use Visual Studio Code.

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.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:

# First option
mv style.css style.scss && echo "" > style.scss

# Second option
rm style.css && touch style.scss

☝

If you prefer, you can also employ a visual file manager for this task, or simply use Visual Studio Code.

Step 5: Getting Started and Running Dev Mode

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

// style.scss

$primary-color: #3498db;
$secondary-color: #e74c3c;

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

  h1 {
    color: $primary-color;
  }

  p {
    color: $secondary-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>
    <div class="container">
      <h1>Hello, Sass!</h1>
      <p>This is a simple example of using Sass with HTML.</p>
    </div>
  </body>
</html>

☝

The most important part of this HTML code is the script tag, which is required to import sass code

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

// 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

💡

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.

Jhordy's blog