Make environment variables available as Sass variables in Vue.js

- vuejs-sass-environment-variables.md

Vue.js: Environment variables in Sass

Make environment variables available as Sass variables in Vue.js.

.env

CONDITION="true"
COLOR="red"

Component.vue

<template>
  <div class="example">
    Example
  </div>
</template>

<script>
  export default {
    name: 'Example'
  }
</script>

<style lang="scss">
  .example {
    color: black;

    @if $CONDITION == true {
      color: $COLOR;
    }
  }
</style>

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `
          $CONDITION: ${process.env.CONDITION || 'false'};
          $COLOR: ${process.env.COLOR};
        `
      }
    }
  }
}