Vue call scss of variables

Graduation season, graduation design topic selected do not know how to do what is good ah ah ah ~ ~ ~

Well, do not panic do not panic.

I just fiddle with the site, global thinking to switch cssstyles to change the theme color. Then, I wanted to get a global variable I set scss in js inside. Well, remember how it got.

First, in scss file with :exportwrite variable names you want to get:

// vars.scss

$color-primary: #3c8dbc;
$bg: #ffffff;

:export {
  colorPrimary: $color-primary;
  bgColor: $bg;
}

Second, you want to import the file again after the introduction of this file:

import styles from '../assets/css/vars.scss'

export default {
    data () {
        return {
            bgColor: styles.bgColor
        }
    }
}

Simply get ~~

But the theme of change still have a headache, try again ~ ~