vueコンポーネントで共通SCSSを使いたい

お世話になっております。

掲題の通りですが、vueコンポーネントで共通SCSSを使いたいのですが上手くいきません。

main.jsで読み込むところまでは上手くいっているようなのですが、
他のコンポーネントで、共通SCSSに書かれた変数を使うことができません。
調べたところ、「.scss拡張子が解決できていない」という記事も見つけたのですが、
その記事の解消法はwebpack.config.jsに記述を追加する方法でした。
私もその方法を試そうとしたのですが、webpack.config.jsを見つけることができず
試すことができませんでした。

ファイル構成

vue.config.js

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: '@import "./src/assets/scss/common.scss";'
　　　　　//sass-loader8.0以降だとprependDataオプションが使えなくなるためグレードダウンしました
      }
    }
  }
};

main.js

js
1import Vue from 'vue'
2import App from './App.vue'
3import store from './store/store'
4import marked from 'marked'
5import router from './router'
6import GlobalValiables from './mixins/globalValiables'
7import axios from 'axios' 
8import VueAxios from 'vue-axios'
9require('./assets/scss/common.scss')
10
11Vue.config.productionTip = false
12Vue.mixin(GlobalValiables)
13Vue.use(VueAxios, axios) 
14new Vue({
15  router,
16  render: h => h(App),
17  store
18}).$mount('#app')

###comonn.scss(共通SCSS)

scss
1$base-color:#FEC81A;

Header.vue(変数を使いたいコンポーネント）

vue
1<style lang="scss" scoped>
2header{
3  background:$base-color;
4}
5</style>

エラー

 Undefined variable.
  ╷
3 │   background:$base-color;
  │              ^^^^^^^^^^^
  ╵
  stdin 3:14  root stylesheet
      in 〜/src/components/Header.vue (line 3, column 14)