How to use Pug & Sass (SCSS) in Vue.js 2?
I think any developer who starts using Vue.js thought about that “How can I use my favorite template engine & CSS preprocessor”. First of all, It’s a very simple. You just need to write a few commands and you can use these technologies in your project. I made this tutorial for a full beginner of a Vue.js framework. Hope you find it useful.
So let’s start with a Pug, earlier it is known as a Jade.
For start using Pug you just need to make a simple command, it’s depends on your package manager.
So, if you using yarn, type command:
yarn add pug pug-loader
If you using NPM:
npm install pug pug-loader --save-dev
Now you can use Pug in your project, type lang=”pug” in your project template, like this:
Okay, you did the first part, let’s move to Sass (SCSS) installations.
The first thing we need to do is set some dependencies, execute the command below:
if you use yarn:
yarn add sass-loader node-sass style-loader
and of course if you use NPM, type this:
npm install sass-loader node-sass style-loader --save-dev
Next, you need to add the settings listed below into Webpack, the configuration file located here : “build / webpack.base.conf.js”
Important! Our SCSS files are located in “src / assets / scss”.
extensions: ['.js', '.vue', '.json', 'scss'],
Now you can use SCSS in your projects, for this you need to add the not tricky option lang = “scss” to the section with styles, like so:
For import .scss files you need to type “@import”, for example:
import scss from './assets/scss/main'
Thank you for attention!
I hope you liked this article, and most important if you found it useful.