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

By Desmond Lua

A dream boy who enjoys programming and travelling, maker of Travelopy. Follow me on @d_luaz.

Tags:

Setup Bootstrap 4 With Vue Cli 3 Webpack

Vue.js Code Splitting With Webpack and Vue Cli 3

Setup Vue Cli 3

How To Update vue-cli To Latest Version

Vue Cli 3 Analyze Webpack Bundle

Enable Compass For Sass On Vue.js Webpack Template