how to call Sass variable in a Vue file

Issue

There is a variables.scss file in a project which defines a variable and assigns it a color like this:
$contrast: #edebe4
The current use of the $contrast variable is to set other variables within the variables.scss file.

Now there is a specific .vue file that's used to render data to the browser and it contains this line of code in its template:
<div style="background-color: #edebe4">

When I change that line to
<div style="background-color: $contrast">
the desired background color disappears from that element.

Is there a way to get that element to recognize the $contrast variable so that whenever the value of $contrast is changed that change flows through automatically to this element?

Solution

Just import variables.scss into your .vue

...
<style lang="scss">
@import "variables.scss"
</style>

Answered By - Finn