Use .scss color variables in vue component

Question

I could create a scss class for the button and set the color there but that seems like extra work when all that scss class would do is set the color. My question is can I set the color somehow in the component without having to create and set a class to the component?

//my scss variables. They are in a _variables.scss file.
$t_light: #efefed;
$primary: #61B4C6;
$med_primary: #354063;
$dk_primary: #222f34;
$info: #647373;
$success: #52b173;
$warning: #d0a03b;
$danger: #f44336;

//something like this. This is in the Login.vue file.
<v-btn
    color="primary"
    @click="submit">Login
</v-btn>

Edit Webpack

const mix = require('laravel-mix');
const path = require('path');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
        output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
        resolve: {
            alias: {
                vue$: 'vue/dist/vue.runtime.esm.js',
                '@': path.resolve('resources/js'),
            },
        },
    })
    .babelConfig({
        plugins: ['@babel/plugin-syntax-dynamic-import'],
    })
    .version();

Boussadjra Brahim · Accepted Answer · 2020-04-04 19:29:34Z

2

Based on this article you need to export the sass variables as follows

$t_light: #efefed;
$primary: #61B4C6;
$med_primary: #354063;
$dk_primary: #222f34;
$info: #647373;
$success: #52b173;
$warning: #d0a03b;
$danger: #f44336;

:export{
tLight:$t_light,;
primary:$primary;
....
}

Then import the Sass file (variables.scss) file into JavaScript, giving you access to the variables defined in the file.

 import variables from './variables.scss';

in data property add the variables as :

data(){
  return{
    variables
  };
}

template

<v-btn
    :color="variables.primary"
    @click="submit">Login
</v-btn>

answered Apr 4, 2020 at 19:29

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

9 Comments

Nancy Over a year ago

my webpack looks nothing like that one since I'm also using Inertia-vue, I will add the code in the question, I'm not sure where I would put what's in the article.

Boussadjra Brahim Over a year ago

the article for javascript but you could adapt it to the Vue code

Nancy Over a year ago

the :export doesn't work without the webpack configuration, and I don't know where to put it

Boussadjra Brahim Over a year ago

you put it inside the .scss file where you're defining your variables, but you should configure your webpack

Nancy Over a year ago

That's what I'm saying but I don't know where to add the code needed in the webpack, I added what I have in my webpack in the question above

|

Collectives™ on Stack Overflow

Use .scss color variables in vue component

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related