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/