Nuxt v2.10.xでグローバルなscssの変数が読み込めない

Question

お世話になります。
表題の通り、Nuxtプロジェクト内で、assetsディレクトリ内に作成した.scssファイルから変数を利用としているのですが、エラーが出てしまって進めません。
1日粘っているのですが解決できず、どなたかご教示いただけましたら幸いです。

ちなみに、以下のブログを参考にしております。
nuxt.js で scss のグローバルな変数を使用する

バージョン情報等

モジュール等	バージョン
Nuxt.js	v2.10.2
node-sass	v4.13.0
sass-loader	v8.0.0
@nuxtjs/style-resources	v1.0.0

関係するであろうファイルの内容

nuxt.config.ts

export default {
  mode: 'spa',
  (_省略_)
  /*
  ** Global CSS
  */
  css: [
    '@/assets/scss/app.scss'
  ],
  plugins: [
  ],
  buildModules: [
    '@nuxtjs/eslint-module',
    '@nuxt/typescript-build'
  ],
  typescript: {
    typeCheck: {
      eslint: true
    }
  },
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/pwa',
    '@nuxtjs/style-resources' // 変数読み込み用に追加
  ],
  styleResources: {
    sass: [
      '@/assets/scss/_var.scss' // 読みませたい変数を記述したscssファイル
    ]
  },
 (_省略_)
}

package.json(インストールしているパッケージ情報のみ抜粋)

"dependencies": {
    "@nuxt/typescript-runtime": "^0.2.4",
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/pwa": "^3.0.0-0",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "@nuxt/typescript-build": "^0.3.4",
    "@nuxtjs/eslint-config": "^1.0.1",
    "@nuxtjs/eslint-config-typescript": "^0.1.3",
    "@nuxtjs/eslint-module": "^1.0.0",
    "@nuxtjs/style-resources": "^1.0.0",
    "@storybook/addon-actions": "^5.2.6",
    "@storybook/addon-links": "^5.2.6",
    "@storybook/addons": "^5.2.6",
    "@storybook/vue": "^5.2.6",
    "@vue/test-utils": "^1.0.0-beta.27",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^24.1.0",
    "babel-loader": "^8.0.6",
    "babel-preset-vue": "^2.0.2",
    "css-loader": "^3.2.0",
    "eslint": "^6.1.0",
    "eslint-plugin-nuxt": ">=0.4.2",
    "jest": "^24.1.0",
    "node-sass": "^4.13.0",
    "sass-loader": "^8.0.0",
    "storybook-addon-vue-info": "^1.3.4",
    "style-loader": "^1.0.0",
    "vue-jest": "^4.0.0-0",
    "vue-loader": "^15.7.2",
    "vue-template-compiler": "^2.6.10"
  }

_var.sass

$palette-key: #fff;

エラー内容抜粋

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):      friendly-errors 06:55:33
SassError: Undefined variable: "$palette-key".
        on line 22 of /app/components/atoms/buttons/CommonLinkButton.vue
>>   color: $palette-key;

   ---------^

Answer 1

これで読み込めるようになるかは定かではないんですがnuxt.config.tsのstyleResourcesに指定している読み込みファイルのタイプがscssではなくsassになってます。他は特に問題ないように思えます。

styleResources: {
  scss: [
    '@/assets/scss/_var.scss' // 読みませたい変数を記述したscssファイル
  ]
},

Comments

[fightTT]

ご回答ありがとうございます！
一瞬terateilへの入力間違いかと思い手元のwebpack.config.jsを見直してみましたら、思いっきりご指摘のタイプミスをしておりました。。
@nuxtjs/style-resourcesのドキュメントやらソースを見ても解決できず困っておりましたが大変助かりました。
このような基本的なところを見落としておりましてお恥ずかしい限りでございます。