CODEWITHSUNDEEP
javascriptvue.jssassvuejs2vuetify.js
Nancy
Nancy

Reputation: 1051

Use .scss color variables in vue component

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();

Upvotes: 3

Views: 4909

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

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>

Upvotes: 2

Related Questions