How to pass SCSS variables into vueify component

Let's say I have a main SCSS variables file (called _variables.scss). In it, I've defined my color scheme and other stuff that will be re-used throughout the site.

Next, I use vueify (or laravel-elixir-vueify) to create Vue components. I want to include SCSS styling in each component, however whenever I try to reference a variable from _variables.scss, it throws an error saying that the variable is undefined.

<template>
<!-- HTML stuff here -->
</template>

<script>
// the components JS here...
</script>

<style lang="scss">
#main-banner {
    color: $brand-primary;
}
//throws "Variable $brand-primary not defined"
</style>

How could I pass variables from _variables.scss to my vue component?

clay

9 years ago

Best Answer

Level 20

The only way I've been able to achieve this is to add an import statement to the top of your component <style> section, to import your 'variables' file. You'd have to do that for each component that needs to use a variable.

stwilson

9 years ago

Level 16

To build on @clay's answer, this is an example of how I achieved the answer in a vue2 component:

<style lang="scss">

    @import './resources/assets/sass/_variables.scss';

    .card-block {
        background: $card-bg !important;
    }

</style>

Please or to participate in this conversation.