17
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Nuxt2.0で、Storybookを使う

Last updated at Posted at 2018-10-02

概要

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

17
16
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
17
16

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?