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, 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: "<Dashboard />",
      components: { Dashboard }
    })
  }
})

Here's the individual component I'm using Element with:

<template>
  <div id="page-container">
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#fff"
      text-color="#545c64"
      active-text-color="#ffd04b">
      <el-menu-item class="el-menu-item--brand">FastVisa</el-menu-item>
      <el-menu-item index="1">Requests</el-menu-item>
      <el-menu-item index="2">Cases</el-menu-item>
    </el-menu>
  </div>
</template>

<script>
  import _ from 'lodash'

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

      }
    },
    computed: {

    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>

</style>

And element-variables.scss is just the full variables file found here 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.

ElemeFE / element

SCSS variables not being overwritten with Vue in Rails #18802