SCSS variables not being overwritten with Vue in Rails

I'm trying to use a custom .scss file to overwrite some default coloring and such. I've followed the guide on the [docs website](https://element.eleme.io/#/en-US/component/custom-theme#update-scss-variables-in-your-projectl), however it appears that these variables are either not being changed, or being overwritten by the default variables in the built CSS file.

Here's my Vue file:
```
import Vue from 'vue/dist/vue.esm'
import Vuex from 'vuex'
import Dashboard from '../../assist/dashboard.vue'
import VueResource from 'vue-resource'
import TurbolinksAdapter from 'vue-turbolinks'

import ElementUI from 'element-ui';
import './element-variables.scss'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(Vuex)
Vue.use(TurbolinksAdapter)
Vue.use(VueResource)

Vue.use(ElementUI, { locale })

window.store = new Vuex.Store({
state: {
organization: {},
},
mutations: {

}
})

document.addEventListener("turbolinks:load", function() {
Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content')
var element = document.querySelector("#assistdashboard")
if (element != undefined) {

const app = new Vue({
el: element,
store: window.store,
template: "",
components: { Dashboard }
})
}
})
```
Here's the individual component I'm using Element with:
```

import _ from 'lodash'

import { mapMutations } from 'vuex'
export default {
data() {
return {

}
},
computed: {

},
methods: {

}
}

```
And `element-variables.scss` is just the full variables file found [here](https://raw.githubusercontent.com/ElemeFE/element/dev/packages/theme-chalk/src/common/var.scss) with `$--font-path: '~element-ui/lib/theme-chalk/fonts';` pointing at the fonts folder in `node_modules`

Would this maybe because of some kind of conflict with `vue-loader`? I'm not getting any errors from console so I'm not sure where else to look.