Sass with Vite

Vite is a popular tool for front-end projects: it runs a development server and builds the site for publishing. Vite compiles Sass by itself — you only install the compiler package and import .scss files. There is no separate sass --watch step.

Creating a project

Create a project from the plain JavaScript template and install the Sass compiler:

npm create vite@latest site -- --template vanilla
cd site
npm install
npm install --save-dev sass-embedded

sass-embedded is the same Dart Sass, packaged to run faster inside build tools. The ordinary sass package works too; Vite picks whichever is installed.

Where the styles live

In a Vite project the code lives in src/. Put the styles in src/styles/:

site/
├── index.html
├── src/
│   ├── main.js
│   └── styles/
│       └── main.scss
└── package.json

Everything you see in this course under styles/ goes into src/styles/ in a Vite project. Create src/styles/main.scss:

// src/styles/main.scss
$primary: #2563eb;
 
h1 {
  color: $primary;
}

Importing the styles

Vite adds styles to the page when JavaScript imports them. Open src/main.js, remove the template code and import the file:

// src/main.js
import './styles/main.scss';
 
document.querySelector('#app').innerHTML = '<h1>My site</h1>';

Start the development server:

npm run dev

Open http://localhost:5173: the heading is blue. Change $primary and save — the page updates instantly without a reload.

Building

For publishing, build the project:

npm run build

Vite compiles the Sass, minifies the CSS and puts it into dist/assets/ with a hash in the file name, for example index-B7f3kQ2a.css. The dist/ folder is what you upload to the server.

Files Vite treats as Sass

Partials are covered in the chapter about files and modules.

Common mistake

If you import a .scss file without installing the compiler, the dev server shows an error saying the preprocessor dependency is not found. Vite does not include Sass — run npm install --save-dev sass-embedded and restart npm run dev.