Storybook 5.3以降に採用されている ./storybook/preview.js でBulmaのCSSをimportしようとしたらpostcss-loaderのエラーが出る

TL;DR

Storybookで表示しているVueコンポーネント全部にBulmaのCSSを適用させたい。

Storybook 5.3から採用された ./storybook/preview.js にBulmaのCSSを読み込ませようとすると、
postcss-loaderのエラーでStorybookが起動しない。

./storybook/preview.js

import './storybook/bulma/css/bulma.css'

Storybook 5.3から採用された設定ファイルに合わせたい

Storybook 5.3からファイル構成が変わるとのことなので、Storybookで管理しているコンポーネントにCSSを共通して適用させる方法を調べていました。

Declarative Storybook configuration - Storybook - Medium. https://medium.com/storybookjs/declarative-storybook-configuration-49912f77b78

CSS フレームワークに依存したコンポーネントをStorybookでもみたい、というユースケースです。
Vue/NuxtでCSS フレームワークを採用しても、ご存知のとおりWebpackが別物になっているためStorybookでは反映されません。

共通CSSを適用したコンポーネントの中にねじ込む方法

Storybook 5.2を使っていたときは addDecorator を用いて、BulmaのSASSを読み込んだVueコンポーネントに無理やりStoryを入れる方法を採っていました。

tacamy.hatenablog.com

共通のスタイルを適用できるようにする

qiita.com

しかし、Storybook内でCSSは適用されるものの 読み込んだはずのコンポーネントが"Unknown custom element"になるなど
無理矢理感の強い方法だったので「なんとかできないか」と思いました。

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

CSSをWebpackで読み込む方法を試す

Storybook 5.2以前の ./storybook/config.js に読み込みたいCSSを指定して、対応するWebpackのloaderを呼び出せば実現する例があります。

qiita.com

そこで、Storybook 5.3以降に対応させたWebpackの設定と ./storybook/preview.js にCSSを読み込ませようとしました。

/storybook/main.js

const path = require('path');
module.exports = {
  stories: ['../components/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links'],
  webpackFinal: async (config, { configType }) => {
    config.resolve.alias['@'] = path.resolve(__dirname, '../')
    config.module.rules.push({
      test  : /\.css$/,
      loader : ['style-loader', 'css-loader'],
    },);
    return config;
  },
};

./storybook/preview.js

import './storybook/bulma/css/bulma.css'

…が、できなかった

postcss-loaderのエラーについて調べると、 loader の順序を変えるとか複数回loadしようとしているとか出ますが、そこをいじっても全く改善されません。

これで1時間ぐらい溶けました。あんまり本質的じゃないところなのにー

ERROR in ./node_modules/bulma/css/bulma.css (./node_modules/css-loader/dist/cjs.js??ref--3-1!./node_modules/postcss-loader/src??postcss!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/src!./node_modules/bulma/css/bulma.css) Module build failed (from ./node_modules/postcss-loader/src/index.js): SyntaxError

(1:1) Unknown word

1 | var api = require("!../../style-loader/dist/runtime/injectStylesIntoStyleTag.js"); | ^ 2 | var content = require("!!../../css-loader/dist/cjs.js!../../postcss-loader/src/index.js!./bulma.css"); 3 |

まだ調べています

解決法がございましたら教えていただけると助かります🙇‍♂️
見つかり次第 ~~体が持ったら~~ 追記します。

くろおーかみ*てっく

しがないくろおーかみの勉強記