Project: Vanilla JS + Sass with Vite

Vite is a modern tool based on Rollup that allows us to develop frontend projects much more efficiently compared to other options like create-react-app, webpack, or vue-cli. Vite enables project creation, provides a development server, and optimizes code for production.

In this example, we will create a project using vanilla JavaScript without any framework and include the Sass module to manage styles.

Creating a New Project with Vite

Create a new project with the following command:

				
					npm create vite

Development Languages

Select «vanilla» as the programming language.

Enter the project directory and install the necessary packages and dependencies:

				
					cd project-name
npm install

Sass Module

To use Sass, install an extra module:

				
					npm add -D sass

By opening the package.json file, you’ll see that the new dependency has been added.

We will no longer need the style file with a .css extension, so we can rename it with the .scss extension and import it with this same extension.

Finally, we start the project.

				
					npm run dev
Facebook
Twitter
LinkedIn