Nuxt.js + Storybook導入で詰まった点の覚え書き

概要

既存のnuxt.jsにstorybookを導入しようとして、詰まった点をまとめます。
基本は公式ドキュメントの手順を参照

環境

storybook : 6.1.14
nuxt.js: 2.9.2

scssを読み込みたい

遭遇したのは2パターンでvueファイル上の<style lang="scss">内にあるscssと全体のscssファイルの読み込みである。

大体全体のscssが読み込まれていない場合,vueファイル内で参照している変数がうまく読み取れず以下のようなエラーが出る。

SassError: Undefined variable: "$変数名".

これを解決するためには.storybook/main.jsで以下のようにwebpackの設定をしてあげると解決する。

.storybook/main.js

const path = require('path');
const rootPath = path.resolve(__dirname, '../');
module.exports = {
  webpackFinal: async (config, { configType }) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader',
        {
          loader: 'sass-loader',
          options: {
            // scssファイル読み込み
            prependData: `
              @import "~/assets/scss/<scssファイル1>";
              @import "~/assets/scss/<scssファイル2>";
            `
          }
        }
      ],
      include: rootPath
    });
    return config;
  },
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}

webpackのドキュメントだとadditionalDataになってるけどバージョンの問題だろうか?

参照しているvueのpathが~/xxxx.vueになっており、ファイルが見つからない。

Module not found: Error: Can't resolve '~xxxx`

みたいなエラーが出てくる

これは.storybook/main.jsに以下のような設定を追加追加することで解決できる。

.storybook/main.js

const path = require('path');
const rootPath = path.resolve(__dirname, '../');
module.exports = {
  webpackFinal: async (config, { configType }) => {

    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader',
        {
          loader: 'sass-loader',
          options: {
            prependData: `
              @import "~/assets/scss/<scssファイル1>";
              @import "~/assets/scss/mixins/<scssファイル2>";
            `
          }
        }
      ],
      include: rootPath
    });
    config.resolve.alias['~'] = rootPath;
    return config;
  },
  "stories": [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ]
}

@の場合は

config.resolve.alias['@'] = rootPath;

とすれば良い。

解決できなかった問題

Nuxtにはpluginとして任意のjsコードをインジェクトする機構が存在する。参考

これをstorybook上だと以下のようなエラーが出てinjectしてくれなかった。

_vm.<pluginでinjectされるはずの> is not a function

良い方法があれば教えてもらえるとうれしい。

scssの対応を除いて概ねすんなりと導入できた。
nuxtと言いつつ大体webpackの設定周りだった。webpackは触りたくないなぁ。。。