1

I have some struggles with importing scss variable into my Vue 3 app. I have gloabal variable defined in colors like $some-class-danger or $some-class-success.

So I would need to import only $some-class and add danger or success property dynamicly.

So for now I have something like:

<style scoped lang="scss">
  @import "@/scss/variables/variables";
 
  .drop-color{
    color: $some-class-danger;
  }
</style>

So this works, but I need it to have v-bind(label) and looks like:

 <style scoped lang="scss">
      @import "@/scss/variables/variables";
     
      .drop-color{
        color: $some-class- v-bind(label);
      }
    </style>

but it's not working that way, any ideas how to fix it?

Rade Iliev
  • 199
  • 3
  • 14
  • Scss is converted to Css when you build you application. Scss can't be dynamique. But you can affect dynamic style ou class with Vuejs. Have a look to this page: https://vuejs.org/v2/guide/class-and-style.html – wawan Sep 08 '21 at 10:11
  • Try binding your sass variables file inside vue config as in following answer: https://stackoverflow.com/a/55583615/16849180 – maki000 Sep 08 '21 at 11:19

0 Answers0