CODEWITHSUNDEEP
vue.jssass
paupaulaz
paupaulaz

Reputation: 977

Access scss variable from <template> of VueJS component

In my VueJS project, I have a variables.scss file which contains a few variables that I usually @importin the <style/> section of my components when I need them locally. This works fine, but how can I use one of those variables when I need them as attributes to an element of my template? In my case, I am trying to use my primary color as the bar-color attribute of a progress-bar (See here for this component's doc).

Here is what I have tried without success, even after importing the variable file in my style section : 

<template>
...
<progress-bar :val="value" size="large" bar-color="$primary"></progress-bar>
...
</template>

<style lang="scss" scoped>
@import "../assets/styles/variables.scss";
</style>

Upvotes: 0

Views: 6416

Answers (2)

Ajay Kumar
Ajay Kumar

Reputation: 141

Try this out, Declare your variables in scss file and export it.

like this
In scss

$white-color: #fff;

:export {
  whitecolor: $white-color;
}

In ts

import variables from 'variables.scss';

primary = variables.whitecolor;

In HTML

<progress-bar :val="value" size="large" :bar-color="primary"></progress-bar>

Upvotes: 6

Nate
Nate

Reputation: 615

You could set your variables in a javascript file, import the file into your component and then access them from that instead?

Upvotes: 0

Related Questions