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

Install sass and compass-mixins.

npm install sass-loader node-sass --save-devnpm 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 🖖 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.