How to use sass in Vitejs

Integrating and using Sass in a Vite project is straightforward. Here, I will provide a step-by-step guide on how to use Sass in a Vite project:

Step 1: Create a new Vite project

If you haven't created a Vite project yet, you can use the following command to create a new one:

bash
npm create vite@latest my-vite-app --template vue
cd my-vite-app
npm install

In this example, I used Vue as the framework, but Vite also supports multiple popular frameworks such as React, Vue, and Svelte.

Step 2: Install Sass

In your Vite project, you need to install the Sass package. You can install it using npm or yarn:

bash
npm install sass

or

bash
yarn add sass

Step 3: Use Sass in your components

After installing Sass, you can use it in your project. For example, if you are using Vue components, you can specify lang="scss" or lang="sass" within the <style> tag to inform Vite that you are using Sass.

Example.vue:

vue
<template>
  <div class="example">
    Hello, Vite with Sass!
  </div>
</template>

<style lang="scss">
.example {
  color: pink;
  font-size: 20px;
  background-color: black;
}
</style>

This enables your .vue files to use Sass. Here, you can leverage all the features of Sass, including variables, nested rules, and mixins.

Step 4: Run your project

Once everything is set up, you can start your project:

bash
npm run dev

This allows your Vite project to correctly compile Sass code, and you can see components styled with Sass in your browser.

Summary

Through the above steps, you can see that using Sass with Vite is straightforward and simple. Simply install the appropriate Sass package and specify the use of lang="scss" or lang="sass" in the style sections of your project. Vite will handle the rest automatically. This allows for a more efficient development process and cleaner, well-organized style code.