Nuxt.js+storybook for vueで、エイリアス~を使いたい。

Question

発生している問題・エラーメッセージ

in ./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-103f23fb","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./components/atoms/button/Fav_button.vue
Module not found: Error: Can't resolve 'assets/img/fav_heart.png' in '/Users/s-endo/web-poc/components/atoms/button'
 @ ./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-103f23fb","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./components/atoms/button/Fav_button.vue 7:552-587
 @ ./node_modules/vue-style-loader!./node_modules/css-loader?sourceMap!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-103f23fb","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./components/atoms/button/Fav_button.vue
 @ ./components/atoms/button/Fav_button.vue
 @ ./stories/index.stories.js
 @ ./stories .stories.js$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/vue/dist/server/config/polyfills.js ./node_modules/@storybook/vue/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js

Answer 1

Nuxt.jsがデフォルトで設定しているaliasか必要な分をstorybookのwebpackにも設定すると解決すると思います。

Nuxt.jsの実装
https://github.com/nuxt/nuxt.js/blob/dev/lib/builder/webpack/base.js#L88

完全には一致していませんが、下記のような感じでstorybookのwebpackにaliasの設定を追加してみてください。
https://github.com/isoppp/nuxt-oreore-starter-kit/blob/master/.storybook/webpack.config.js#L6

公式のこちらも参考になるかもしれません。
https://storybook.js.org/configurations/custom-webpack-config/

回答になっておりましたら幸いです。