Using SASS/SCSS in Vue.js 2

2 min readJan 10, 2017

Brief description on how to include sass/scss styling files with webpack for a veu.js 2 project

This blog gives you a brief description on how to include SASS/SCSS styling files in your vuejs files. Normally in vuejs we used to have CSS styles applied to our code like the below.

But in modern applications developers used to design using styles in SCSS/SASS syntax which will be converted to native CSS format by the web pack. This gives them easiness in styling and provides lots of additional functionality to CSS like variables, nesting and more which can make writing CSS easier and faster.

Let us see how we can implement SASS/SCSS in our vue.js application. For this we need to install npm packages like sass-loader, node-sass and style-loader in our application. Either we can directly install those from the npm packages or include the same in our application package.json file, under ‘devDependencies’.

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

in our application package.json"devDependencies": {
    "css-loader": "^0.23.1",
    "node-sass": "^4.1.1",
    "sass-loader": "^3.2.3",
    "style-loader": "^0.13.1"
    "vue-loader": "^9.0.0",
    "vue-router": "^2.1.1",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.12.0"
  }

In our webpack.config.js file include the below ‘loader’ in the ‘module’ and a new object to initiate vue loader

Now we have set up the required packages for working with SCSS/SASS in our application. Now in our ‘main.js’ file will be like below

and the updated Main.vue file will be

Here the code lang="scss" denotes that the syntax used is SCSS syntax and @import will imports the scss file.

Using SASS/SCSS in Vue.js 2

Written by Mahesh