how to call Sass variable in a Vue file-CodePudding

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?

CodePudding user response：

You can make scss variables available globally (in each component). Just add this to vue.config.js:

css: {
  loaderOptions: {
    scss: {
      additionalData: `@import "~@/variables.scss";`
    }
  }
}

More info here

CodePudding user response：

Just import variables.scss into your .vue

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

CodePudding user response：

This worked -

in variables.scss file added

.contrast-background {
    background-color: $contrast;
}

in .vue file changed element to this

<div >

Amendment -

Here is the final solution that was implemented, which was made possible by @Finn's post -

Changes to .vue file:
added this

<style lang="scss" scoped>
    @import "@/layout/design/variables.scss";

    .contrast-background {
    background-color: $contrast;
}
</style>

and changed element to this

<div >

This approach avoids changes to the variables.scss file.