[Nuxt.js v2.4.0] nuxt-sass-resources-loaderのエラー対処方法

概要

Nuxt.js v2.4.0 にアップデートし、yarn devした際にエラーが発生。

$ yarn dev

 ERROR  Failed to compile with 10 errors             friendly-errors 11:14:32


 ERROR  in ./components/PostData.vue?vue&type=style&index=0&lang=scss&

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

      color: $oc-gray-4;
            ^
      Undefined variable: "$oc-gray-4".
      in ./components/PostData.vue (line 179, column 14)

原因

nuxt-sass-resources-loaderの issue(Package seems to be broken with nuxt 2.4.0)を確認すると、@nuxtjs/style-resourcesを使うように書いてあった。

リプレースする方が手っ取り早いので変えてしまう。

解決方法

$ yarn remove nuxt-sass-resources-loader
$ yarn add -D @nuxtjs/style-resources

nuxt-sass-resources-loaderを使っていた際は、nuxt.config.jsで下記のように記述していたが、

  modules: [
    [
      'nuxt-sass-resources-loader',
      [
        '~/assets/style/Settings/_colors.scss',
        '~/assets/style/Settings/_variables.scss',
        '~/assets/style/Tools/_mixins.scss',
      ],
    ],
  ],

まるっと下記のように@nuxtjs/style-resourcesに置き換えてしまう。

  modules: [
    '@nuxtjs/style-resources',
  ],

  styleResources: {
    sass: [
      '~/assets/style/Settings/_colors.scss',
      '~/assets/style/Settings/_variables.scss',
      '~/assets/style/Tools/_mixins.scss',
    ],
  },

以上で問題なくビルドも通った。