Enable Compass For Sass On Vue.js Webpack Template

This article assuming you created your project using webpack template.

vue init webpack <PROJECT_NAME>

Make sure you already setup Sass for Vue.js Webpack Template.

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

Install compass-mixins.

npm install compass-mixins --save-dev

Edit build/util.js to add includePaths to node_modules/compass-mixins/lib for sass and scss.

...
exports.cssLoaders = function (options) {
  
  ...

  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    ...
    // EDIT
    sass: generateLoaders('sass', { indentedSyntax: true, includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')] }),
    scss: generateLoaders('sass', { includePaths: [path.resolve(__dirname, '../node_modules/compass-mixins/lib')] }),
    ...
  }
}
...

Now you can use Compass in your *.sass files.

// Source: https://cloudcannon.com/deconstructions/2014/11/15/facebook-content-placeholder-deconstruction.html

@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