How to install and integrate Sass in Vue.js

How to install and integrate Sass in Vue.js

In this tutorial, you'll learn how to install Sass in an already existing Vuejs project and how to integrate Sass in a Vuejs project from scratch.

Content

  1. Introduction
  2. Sass in a Vue project from scratch
  3. Sass in an existing Vue project
  4. Dart Sass or Node Sass and why?
  5. Keep in mind

Hello there, users!

As you may know, Ruby Sass support finished in march, this year (2019). This means everyone should migrate their versions to either Dart Sass or Node Sass.

In this document I’d like to show you how to install Sass in an already existing Vuejs project and how to integrate Sass in a Vuejs project from scratch.

Sass in a Vue project from scratch

This is the easier part, why? Because with Vue-CLI 3 you can integrate SASS automatically!

Let's code 💻.

First of all, we’ll install the latest Vue Cli version. We’ll open the terminal inside our project folder and type

npm install -g @vue/cli 

When this is done (it may take some time), we’ll start creating our Vue project. We’ll type

vue create your-project-name

Now, we’ve reached the interesting point.

If you’ve ever created a Vue project with Vue Cli, you already know what this is about. In case you didn’t, then welcome to your first time.

We’ll choose

> Manually select features

Go on and select each feature you’d like to have in your project. Make sure you select the option CSS Pre-processors. I'll also choose Linter:

> CSS Pre-processors
> Linter / Formatter

Next step. This is the key point of this document. Of all the options showing on the list, you can choose either Dart Sass or Node Sass, I’ll choose...

> Sass/SCSS (with dart-sass)

Next to this step, select a linter of your like and the options you’d prefer. Mines are: Prettier, On save and In dedicated config files.

Done! When the installation is over, go back to your project folder and type

npm run serve

If you check you App.vue code in a text editor, you’ll see that your <style> tag speaks now in SASS/SCSS:

<style lang=”scss”>
// Your AWESOME styles go here
</style>

✨AWESOME✨, don’t you think?

Go for it, it’s time for your SASS styles to shine!

Sass in an existing Vue project

If you have a project that wasn’t created using Vue Cli or you simply forgot to select the pre-processors option, it is better for you to install Node Sass+Sass Loader. Just open your terminal inside the project folder and type

npm install --save-dev node-sass sass-loader

Now, go to your .vue component, search your <style> tag and tell him now he’s speaking in SASS/SCSS by adding lang="scss":

<style lang=”scss”>
// Your AWESOME styles go here
</style>

Dart Sass or Node Sass and why?

What is the difference between Dart or Node Sass? Well, here we go as a side-note.

Dart Sass may work slower and use more memory (it compiles pure JavaScript), however, it works better for cross-platform than Node-Sass. Plus, Node-Sass files take too long to be installed, which doesn't match little and simple prototypes or projects. You can learn more about this here:

Discussion 1 Discussion 2

Keep in mind

📌You must run

npm run serve

in order to see your SASS changes live. Do not forget this, else you will be changing your styles and won't see them changing in your page!

📌Remember after running your npm run serve you’ll see in your terminal where your App is running locally, for example localhost:8080, not your index.html page inside the project.

vue-js sass node-js javascript web-development

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Hire Node.JS Developers | Skenix Infotech

We are providing robust Node.JS Development Services with expert Node.js Developers. Get affordable Node.JS Web Development services from Skenix Infotech.

How to Hire Node.js Developers And How Much Does It Cost?

A Guide to Hire Node.js Developers who can help you create fast and efficient web applications. Also, know how much does it cost to hire Node.js Developers.

Top Vue.js Developers in USA

Vue.js is an extensively popular JavaScript framework with which you can create powerful as well as interactive interfaces. Vue.js is the best framework when it comes to building a single web and mobile apps.

Top Node.js Development Companies and Expert NodeJS Developers

A thoroughly researched list of top NodeJS development companies with ratings & reviews to help hire the best Node.JS developers who provide development services and solutions across the world. List of Leading Node.js development Service Providers...