nuxtjsでグローバルなSass(SCSS)を使いたい

前提・実現したいこと

Nuxt.jsで、レスポンシブ対応を実現するために、SCSSファイルを作成しました。
作成したSCSSファイルをグローバルに適用させようとしたところ、エラーが発生して困っています。
エラーの解消方法を教えていただきたいです。

発生している問題・エラーメッセージ

ERROR in ./pages/HomeTop.vue?vue&type=style&index=0&id=077aef26&lang=scss&scoped=true&

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
╷
42 │ ┌ @include display_pc {
43 │ │ height: 80vh;
44 │ └ }
╵
pages/HomeTop.vue 42:3 root stylesheet

該当のソースコード

mixinscss
1@mixin display_pc {
2  @media (min-width: 600px) {
3    @content;
4  }
5}

commonscss
1@import "./_mixin.scss";

nuxtconfigjs
1export default {
2  css: ["./assets/styles/common.scss"],
3};

HomeTopvue
1<style  lang="scss" scoped>
2  @include display_pc {
3    height: 80vh;
4  }
5/* 以下略 */

ディレクトリ及びファイル構造

親	子	孫
assets
	styles
	_mixin.scss
	common.scss
pages
	HomeTop.vue
nuxt.config.js

試したこと

sass-loader及びnode-sassのバージョン変更。
@nuxtjs/style-resourcesのインストール。
nuxt.js公式サイトの確認。

補足情報（FW/ツールのバージョンなど）

packagejson
1{
2  "name":,
3  "version": "1.0.0",
4  "description": "Nuxt.js project",
5  "author":,
6  "private": true,
7  "scripts": {
8    "dev": "nuxt",
9    "build": "nuxt build",
10    "start": "nuxt start",
11    "generate": "nuxt generate",
12    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
13    "precommit": "npm run lint"
14  },
15  "dependencies": {
16    "nuxt": "^2.0.0"
17  },
18  "devDependencies": {
19    "babel-eslint": "^10.0.1",
20    "eslint": "^4.19.1",
21    "eslint-friendly-formatter": "^4.0.1",
22    "eslint-loader": "^2.1.1",
23    "eslint-plugin-vue": "^4.0.0",
24    "fibers": "^5.0.0",
25    "sass": "^1.38.0",
26    "sass-loader": "^10.2.0"
27  }
28}