vueのnuxxでsassを使用する場合に[Make sure 'options.resources' is String or Array of Strings]とエラーがでる場合

nuxtでsassの使用方法

sassのインストール

yarn add --dev node-sass sass-loader

あとは、vueの中でも書けるようになります

使用方法

*.vue

<style lang="scss" scoped>
// you can use scss syntax here.
</style>

使用例

*.vue

<style lang="scss" scoped>
test {
  child {
    background-color: antiquewhite;
  }
}
</style>

Tips

nuxt.config.js

css: [
  '~/assets/css/main.css',
],

上記の設定から以下の設定に変更するとすべてのファイルに自動でインクルードされる
下記で説明しているresources-loaderとは違い表示されるページに追加される

nuxt.config.js

css: [
  '~/assets/css/main.scss',
],

nuxt.js本家参考ページ
https://ja.nuxtjs.org/api/configuration-css/

リソースローダーのインストール

すべてのsassに以下で指定したファイルが読み込まれる(@import)
上記しているやり方とは違い使用したいsassファイルに読み込まれる
また、ワイルドカード読み込みなども可能
重複読み込み注意

yarn add --dev nuxt-sass-resources-loader

設定

nuxt.config.js

module.exports = {
  env: {
    baseUrl:
      process.env.BASE_URL ||
      `http://${host}:${port}`
  },
/* 省略 */

  modules: [
    'nuxt-sass-resources-loader'
  ],
  sassResources: [
      //自分の作成したsassファイル
      //ワールドカードも使える -> *.scss
      '@/assets/css//main.scss',
  ]
}

sassResourcesを追加するのがポイント