Enable Sass On Vue.js Webpack Template

Sep 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>

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.