Open2021/02/22にコメント追加2

Nest.js + Storybook + Bulma 環境構築メモ

BulmaをNext.jsに適用する

bulma: 0.9.2
next: 10.0.6

pages/_app.tsx

import '../../styles/styles.scss';
import { AppProps } from 'next/app';

const App = ({ Component, pageProps }: AppProps) => (
  <Component {...pageProps} />
);

export default App;

StorybookでBulmaを適用する

下記を参考にパッケージを追加

@storybook/preset-scss: 1.0.3
css-loader: 5.0.2
sass-loader: 10.1.1
style-loader: 2.0.0

.storybook/main.js

module.exports = {
  stories: ['../src/components/**/*.stories.@(tsx|mdx)'],
  module.exports = {
     '@storybook/addon-knobs',
     '@storybook/addon-docs',
     '@storybook/addon-a11y',
+    '@storybook/preset-scss'
   ],
 };

.storybook/preview.js

import '../styles/styles.scss';

sass-loaderのv11.0.1 を追加した際に下記のエラーが発生した。v10.1.1に変更したところ問題なく動作した。

ERROR in ./styles/styles.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./styles/styles.scss)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
TypeError: this.getOptions is not a function
    at Object.loader (xxxxx/node_modules/sass-loader/dist/index.js:25:24)
 @ ./styles/styles.scss 2:12-129 9:17-24 13:7-14 45:20-27 47:4-60:5 49:6-59:7 50:38-45 56:26-33 58:21-28 68:15-22
 @ ./.storybook/preview.js
 @ ./.storybook/preview.js-generated-config-entry.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/storybook-init-framework-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/config.js-generated-other-entry.js ./node_modules/@storybook/addon-docs/dist/frameworks/react/config.js-generated-other-entry.js ./node_modules/@storybook/addon-links/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-actions/dist/preset/addArgs.js-generated-other-entry.js ./node_modules/@storybook/addon-knobs/dist/preset/addDecorator.js-generated-other-entry.js ./node_modules/@storybook/addon-a11y/dist/a11yRunner.js-generated-other-entry.js ./node_modules/@storybook/addon-a11y/dist/a11yHighlight.js-generated-other-entry.js ./.storybook/preview.js-generated-config-entry.js ./.storybook/generated-stories-entry.js (webpack)-hot-middleware/client.js?reload=true&quiet=false&noInfo=undefined
Child HtmlWebpackCompiler:
                          Asset      Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  6.21 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 2 KiB {HtmlWebpackPlugin_0} [built]

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

kobayashi-m42

storyshotsがある場合

.storybook/preview.js でscssを読み込んでいる場合、Jestでエラーが発生した。

    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import '../styles/styles.scss';
                                                                                                    ^^^^^^^^^^^^^^^^^^^^^^^

    SyntaxError: Unexpected string

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)
      at Object.configure [as default] (node_modules/@storybook/addon-storyshots/dist/frameworks/configure.js:75:23)
      at Object.load (node_modules/@storybook/addon-storyshots/dist/frameworks/react/loader.js:24:24)
      at Object.loadFramework [as default] (node_modules/@storybook/addon-storyshots/dist/frameworks/frameworkLoader.js:26:19)
      at Object.testStorySnapshots [as default] (node_modules/@storybook/addon-storyshots/dist/api/index.js:60:39)

下記を参考にjest.config.jsを修正。

jest.config.js

  "moduleNameMapper": {
    "\\.(scss)$": "identity-obj-proxy"
  },

また、.storybook/preview.jsをTSに変更する必要もあった。