Enable Sass On Vue.js Webpack Template

September 13, 2017

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>
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.