概要
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
"scripts": {
"storybook": "start-storybook -p 9001"
}
import { configure } from "@storybook/vue";
const req = require.context("../stories", true, /.story.js$/);
function loadStories() {
req.keys().forEach(filename => req(filename));
}
configure(loadStories, module);
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, '../')
}
}
};
<template lang="pug">
.background
img(src="~assets/img.jpeg")
</template>
<style>
.background {
background: url('~assets/img.jpeg');
}
</style>
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