【Keen UI】 如何重写variables.scss？

我试着重写variables.scss，但是没起作用。

首先我这样引入KeenUI：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

/* Notifications */
import VueAWN from "vue-awesome-notifications"
let options = {}
Vue.use(VueAWN, options)

/* KeenUI */
import KeenUI from 'keen-ui';
import 'keen-ui/dist/keen-ui.css';
// Here define components global options
Vue.use(KeenUI, {
    UiTooltip: { 
      position: 'top'
    },
    UiButton: {
      iconPosition: 'right'
    }
  }
)

/* Running Vue */
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  store,
  router,
  components: { App }
}).$mount('#app')

然后创建了src/assets/style/variables.scss:

$brand-primary-color: red;
$brand-accent-color: green;

最后修改vue.config.js:

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/assets/style/variables.scss";`
      }
    }
  },
  devServer: {
    host: '0.0.0.0',
    port: 80,
    disableHostCheck: true,
    hot: true,
    watchOptions: { 
      aggregateTimeout: 300, 
      poll: true 
    },
    proxy: {
      '^/api': {
        target: 'http://sanic_server:8080',
        ws: true,
        changeOrigin: true
      }
    }
  }
}