vue-cliで作成したプロジェクトに、共通のscssファイルが読み込めない

#vueの学習をしていますが、scssファイルの呼び出しが上手くできす困っています。
ファイ構成は以下のようになっておりまして、_mixin.scssで定義した内容をcommon.scssでimportしています。
ビルド時に自動的に呼び出せるよう「vue.config.js」にて定義したのですが、
App.vueでエラーが発生し、styleに記述したmixinのimportについて、mixinがUndefinedとなってしまいます。

##ファイル構造
src
├── styles
├── common
├── _mixin.scss
└── common.scss
App.vue
vue.config.js

##エラー内容
Failed to compile with 1 error
error in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss&scoped=true&

Syntax Error:
@include display_pc {
^
Undefined mixin.
╷
56 │ ┌ @include display_pc {
57 │ │ display: none !important;
58 │ └ }
╵
stdin 56:3 root stylesheet
in /Users/arakihiroatsu/simple-vue-website-sample/src/App.vue (line 56, column 3)

##各ファイルのソースコード
###_mixin.scss

scss
1/* メディアクエリブレークポイント */
2$xs: 600;
3$sm: 960;
4$md: 1264;
5$lg: 1904;
6$sp-max: calc($xs - 1)px;
7$tb-min: $xs + px;
8$tb-max: calc($sm - 1)px;
9$pc-min: $sm + px;
10
11/* PC */
12@mixin display_pc {
13  @media (min-width: $pc-min) {
14    @content;
15  }
16}
17
18/* タブレット */
19@mixin display_tab {
20  @media (min-width: $tb-min) and (max-width: $tb-max) {
21    @content;
22  }
23}
24 
25/* スマホ */
26@mixin display_sp {
27  @media (max-width: $sp-max) {
28    @content;
29  }
30}

###common.scss

scss
1@import './_mixin.scss';

###vue.config.js

js
1module.exports = {
2  transpileDependencies: [
3    'vuetify'
4  ],
5  css: {
6    loaderOptions: {
7      scss: {
8        prependData: '@import "./src/styles/common/common.scss";'
9      }
10    }
11  }
12}

###App.vue

css
1<style lang="scss" scoped>
2.v-toolbar__title {
3  overflow: visible !important;
4  margin-right: 50px !important;
5}
6
7.v-app-bar__nav-icon {
8  @include display_pc {
9    display: none !important;
10  }
11}
12</style>