Nuxt2.0で、Storybookを使う

概要

Nuxt2.0でstorybook使おうと思ってたら、結構つまづいてしまったのでメモ。

修正の内容

Nuxt2系で、storybook3系使おうとしたら、Module parse failed: Unexpected token. You may need an appropriate loader to handle this file type.とかなって、VueLoaderPluginとかいろいろしてみたけど、挫折した。
そこで、webpack4系 + storybook4系を入れてる記事があったので、それを見て4系を入れた。

2018/10/23 修正 tic40さんありがとうございます！
結果動いたが、storybookでassetsを呼ぶ時に、「Can't resolve 'assets/**'」 とエラーが起きるようになった。
そのため、両方のconfig.jsのaliasの設定をして、「~@assets/**」とすれば、どちらもエラーが発生しなくなった。
ただ、「~@assets」という変な記述しちゃってるので、もっといい方法があったら教えてくださると嬉しいです。

Version

  "dependencies": {
    "@nuxtjs/axios": "^5.0.0",
    "cross-env": "^5.2.0",
    "nuxt": "^2.0.0"
  },
  "devDependencies": {
    "@storybook/vue": "^4.0.0-alpha.23",
    "babel-eslint": "^8.2.1",
    "babel-preset-vue": "^2.0.2",
    "eslint": "^5.0.1",
    "eslint-config-prettier": "^3.1.0",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-prettier": "2.6.2",
    "eslint-plugin-vue": "^4.0.0",
    "node-sass": "^4.9.3",
    "nodemon": "^1.11.0",
    "prettier": "1.14.3",
    "pug": "2.0.3",
    "pug-plain-loader": "^1.0.0",
    "sass-loader": "^7.1.0",
    "sass-resources-loader": "^1.3.3"
  }

コード

$ yarn create nuxt-app nuxts
// addonを使うときもalpha版を使うこと
$ yarn add -D @storybook/vue@alpha
$ yarn add -D babel-preset-vue node-sass sass-loader pug@2.0.3 pug-plain-loader sass-resources-loader

package.json

"scripts": {
  "storybook": "start-storybook -p 9001"
}

storybook/config.js

import { configure } from "@storybook/vue";

const req = require.context("../stories", true, /.story.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

storybook/webpack.config.js

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        loaders: ["style-loader", "css-loader", "sass-loader"],
        {
            loader: "sass-resources-loader",
            options: {
              resources: [
                path.resolve(__dirname, '../assets/stylesheets/variables.scss')
              ]
            }
          }
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'file-loader'
      },
      {
        test: /\.pug$/,
        loader: 'pug-plain-loader'
      }
    ]
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'assets': path.resolve('path/to/assets'),
      '~': path.resolve(__dirname, '../')
    }
  }
};

components/Logo.vue

<template lang="pug">
  .background
    img(src="~assets/img.jpeg")
</template>

<style>
.background {
  background: url('~assets/img.jpeg');
}
</style>

stories/index.story.js

import { storiesOf } from '@storybook/vue'
import Logo from '~/components/Logo.vue'

storiesOf('storybook', module).add('default', () => ({
  components: { Logo },
  template: '<Logo />'
}))

参考にさせて頂いたサイト

Nuxt.jsでStorybookを使う
webpack 4系、ts-loader 4系、storybook 4系にしたときに出る謎のエラーを解決
Webpack4 + Vue.js + Pug + Sass