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
or
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.