Access scss variable from <template> of VueJS component

Question

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>

I think you can't as scss variables are resolved at compile time rather than run time. You can use a class which is using that variable. — Nipun Jain
– Nipun Jain, Commented Jan 18, 2020 at 15:52
the only thing with this approach is that I should dive into the progress-bar code in order to know which css selector I should target but this sounds manageable, thanks! — paupaulaz
– paupaulaz, Commented Jan 18, 2020 at 18:19

Ajay Kumar · Accepted Answer · 2020-01-18 19:00:31Z

6

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>

answered Jan 18, 2020 at 19:00

Ajay Kumar

1512 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pui Ho Lam Over a year ago

you need to declare scss in global.d.ts first and then you also need to rename the scss file as *.module.scss. Please do not just copy the solution from a random website and actually test it out yourself first.

Nate · Accepted Answer · 2020-01-18 15:54:14Z

0

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

answered Jan 18, 2020 at 15:54

Nate

6154 silver badges12 bronze badges

1 Comment

BEvo Over a year ago

why would you write an extra js file to contain the same variables that your s[a|c]ss file already has? sounds like a hack and not the solution

Collectives™ on Stack Overflow

Access scss variable from <template> of VueJS component

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related