How to install and integrate Sass in Vue.js
Content
- Introduction
- Sass in a Vue project from scratch
- Sass in an existing Vue project
- Dart Sass or Node Sass and why?
- 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:
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
