Nuxt.jsで外部scssを読み込む

#やりたいこと
・外部scssを使いたい
・vueファイルで変数、mixinを使いたい
実際の運用ではVueファイルで変数を使うことも出てくることもあるので、両方設定するのがほとんどかと思います

#前提条件
create-nuxt-appで環境が構築されていること
参考：https://ja.nuxtjs.org/guide/installation

#外部scssを使いたい
###必要なパッケージをインストールする
これでscss記法を使えるようになります。

npm install --save-dev sass-loader node-sass

###nuxt.config.jsのGlobal CSSの箇所を編集
これで外部scssを読み込むようになります。
※scssファイル名はご自分の環境に合わせて変更してください

nuxt.config.js

  /*
  ** Global CSS
  */
  css: [
    '~/assets/scss/style.scss'
  ],

#vueファイルで変数、mixinを使いたい
###必要なパッケージをインストールする

npm install --save-dev @nuxtjs/style-resources

###nuxt.config.jsのNuxt.js modulesの箇所を編集
これでvueファイルで変数、mixinを使えるようになります。
※scssファイル名はご自分の環境に合わせて変更してください

nuxt.config.js

  /*
  ** Nuxt.js modules
  */
  modules: [
    '@nuxtjs/style-resources',
  ],
  styleResources: {
    scss: [
      '~/assets/scss/core/_variables.scss',
      '~/assets/scss/core/_mixins.scss',
    ]
  },

参考：https://github.com/nuxt-community/style-resources-module/