how to call Sass variable in a Vue file

Question

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?

Romalex · Accepted Answer · 2022-07-24 12:52:23Z

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

Finn · Accepted Answer · 2022-07-28 17:22:10Z

1

Just import variables.scss into your .vue

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

edited Jul 28, 2022 at 17:22

answered Jul 24, 2022 at 12:31

Finn

1111 silver badge7 bronze badges

1 Comment

knot22 Over a year ago

This is preferable to the way I had figured out how to do it because this avoids cluttering up variables.scss with classes. It was necessary to add @ infront of the import word to get this to work. My solution post has been amended so the final solution is clear to others reading this thread.

knot22 · Accepted Answer · 2022-07-24 17:48:58Z

This worked -

in variables.scss file added

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

in .vue file changed element to this

<div class="contrast-background">

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 class="contrast-background">

This approach avoids changes to the variables.scss file.

Collectives™ on Stack Overflow

how to call Sass variable in a Vue file

3 Answers 3

Comments

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Related