Enable Sass On Vue.js Webpack Template

This article assuming you created your project using webpack template.

vue init webpack <PROJECT_NAME>

Install Sass packages

Sass support is already pre-configured for webpack template. You just need to install sass-loader and node-sass package.

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

Create Sass and CSS files

You can create your Sass files at assets/css/app.sass.

body  // light blue color  background-color: #81BEF7

Create another css files at assets/css/app.css.

body {  font-size: 2em;}

Remember to import the css files at main.js, as webpack only process files being used.

import './assets/css/app.sass'import './assets/css/app.css'

You can also use Sass in *.vue files.

<style lang="sass"></style>