1. Tutorials
  2. Vue.js

Enable Compass Sass for Vue Cli 3 (vue.config.js)

August 24, 2018

Install sass and compass-mixins.

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

Edit vue.config.js.

const path = require('path')

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        includePaths: [path.resolve(__dirname, './node_modules/compass-mixins/lib')]
      }
    }
  }
}

Using compass in sass.

@import "compass/css3"
@import "compass/css3/animation"

@include keyframes(placeHolderShimmer)
  0%
    background-position: -468px 0

  100%
    background-position: 468px 0

.lua-content-placeholder
  @include animation-duration(1s)
  @include animation-fill-mode(forwards)
  @include animation-iteration-count(infinite)
  @include animation-name(placeHolderShimmer)
  @include animation-timing-function(linear)
  background: #f6f7f8
  background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%)
  background-size: 800px 104px
  height: 96px
  position: relative
❤️ Is this article helpful?
Buy me a coffee☕ or support my work via PayPal to keep this space ad-free.
Apps I built 😉
✈️ Travelopy - travel discovery and journal
🔒 LuaPass - offline password manager
✔️ WhatIDoNow - a public log of things I am working on now
By Desmond Lua
A dream boy who enjoys programming and travelling, maker of Travelopy. Follow me on @d_luaz.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.