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 to keep this space 🖖 and ad-free.
If you can't, do send some 💖 to @d_luaz or help to share this article.
👶 Apps I built
Pixtory App (Alpha) - easily organize photos on your phone into a blog.
COVID-19 - data, chart, information & news.
暖心芽 (WIP) 🌞❤️🌱 - reminder of hope, warmth, thoughts and feelings.
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 making apps, travelling and gardening. Follow me on @d_luaz.
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.