Integrating Dart/Node Sass in Vuejs
Tags: vue, sass, webdev, design
Published: 2019-09-25 20:35:45

<h3>Content</h3>
⒈ <a href="#1">Introduction</a>
⒉ <a href="#2">Sass in a Vue project from scratch</a>
⒊ <a href="#3">Sass in an existing Vue project</a>
⒋ <a href="#4">Dart Sass or Node Sass and why?</a>
⒌ <a href="#5">Keep in mind</a>

<h4 id="1">Hello there, users!</h4>

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

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

<h1 id="2">Sass in a Vue project from scratch</h1>

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

Let's code 💻.

First of all, we’ll <b>install the latest Vue Cli version</b>. 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 <b>creating our Vue project</b>. 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. <b>Make sure you select the option CSS Pre-processors</b>. I'll also choose Linter:
```
> CSS Pre-processors
> Linter / Formatter
```

Next step. This is the <b>key point</b> 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: <i>Prettier, On save</i> and <i>In dedicated config files</i>.

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

If you check you <b>App.vue</b> 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>
```

<b>✨AWESOME✨</b>, don’t you think?

Go for it, <b>it’s time for your SASS styles to shine</b>!

<h1 id="3">Sass in an existing Vue project</h1>

If you have a project that <b>wasn’t created using Vue Cli or you simply forgot to select the pre-processors option</b>, 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 <i>.vue</i> component, search your <*style*> tag and tell him now he’s speaking in <b>SASS/SCSS</b> by adding *lang="scss"*:
```
<style lang=”scss”>
// Your AWESOME styles go here
</style>
```

<h1 id="4">Dart Sass or Node Sass and why?</h1>

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

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

<a href="https://stackoverflow.com/questions/56150402/vue-cli-css-pre-processor-option-dart-sass-vs-node-sass">Discussion 1</a>
<a href="https://github.com/JeffreyWay/laravel-mix/issues/1832">Discussion 2</a>

<h1 id="5">Keep in mind</h1>

📌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 <b>where </b> your App is running *locally*, for example *localhost:8080*, <u>not your index.html page</u> inside the project.

<h2>Last words</h2>

This post will be part of a Handy Sass Resources Collection that I’ll be uploading.

Long life and keep coding, see you around 💻!