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};
        `
      }
    }
  }
}

Thank you so much for this. Wanted some conditional css for development and couldn't find a way to do it.

That's perfect, thanks for posting it :)

Thanks for this example. Note that with newer setups the config structure has changed slightly. To be precise: data has changed into prependData.

Thanks man!

For Nuxt js:

build: {
   loaders: {
     scss: {
       additionalData: `$MAIN_COLOR: ${process.env.NUXT_MAIN_COLOR};`,
     },
   },
 },

In nuxt.config.js

Hi man, did you made it work with stylus and nuxt ?
I tried :

build: {
    loaders: {
     stylus: {
       additionalData: `$myred: #000FFF`,
     },
   },

When I use it, it break my build. It add correctly the var, but just after it, I get an error :

1| $myred: #000FFF
   2| @import '~/assets/style/font.styl'
--------------^
   3| @import '~/assets/style/var.styl'
   4| @import '~/assets/style/transition.styl'
   5| @import '~/assets/style/layout.styl'

expected "indent", got "import"
But if I had the same var my self at the top the main stylus file like additionalData does, then it works fine.

Is it not the right way to do it ?

Thanks !