コンポーネントをカタログ化して確認できるので、デザイナー/エンジニアとの共同開発はもちろん、個人開発でもとても便利。 Atomic Design が捗る。
インストール
$ npx sb init
/.storybook以下に必要なファイルが作成される。
アドオン
$ npm i -D @storybook/preset-scss css-loader sass sass-loader style-loader
.storybook/main.jsのaddonsにpreset-scssを追記する。
.storybook/main.jsmodule.exports = {
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/preset-scss",
],
}
webpack4の場合は、sass-loader のバージョンが^11 だとエラーが出るので、^10を指定して入れなおす。webpack5にする場合はこちら。 package.json "sass-loader": "^10",
レスポンシブを確認するために、Storybook上でMediaQueryを切り替えられるようにするアドオン。
$ npm i -D @storybook/addon-viewport
.storybook/main.jsのaddonsにaddon-viewportを追記する。
.storybook/main.jsmodule.exports = {
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/preset-scss",
"@storybook/addon-viewport"
],
}
コンポーネント内で next/router を使用している場合、そのままではエラーが出るのでこのアドオンでエラーを回避する。
$ npm i -D storybook-addon-next-router
.storybook/main.jsのaddonsにaddon-viewportを追記する。
.storybook/main.jsmodule.exports = {
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/preset-scss",
"@storybook/addon-viewport",
"storybook-addon-next-router"
],
}
.storybook/preview.js で Providerを登録する。
.storybook/preview.jsimport { RouterContext } from "next/dist/shared/lib/router-context";
import { RouterContext } from "next/dist/next-server/lib/router-context";
export const parameters = {
nextRouter: {
Provider: RouterContext.Provider,
},
}
絶対パスを通す
.storybook/main.jsに以下を追記する。
.storybook/main.jsconst path = require('path')
const rootPath = path.resolve(__dirname, '../src/')
module.exports = {
webpackFinal: async (config, { configType }) => {
config.resolve.alias['@'] = rootPath
return config;
}
}
グローバルスタイルを読み込ませる
デフォルトのままだと使用するコンポーネント内でインポートしているスタイルは読み込まれるが、コンポーネント外で読み込んでいるグローバルスタイルまでは読み込んでくれない。
storybook/preview.js の冒頭でグローバルスタイルをインポートする。
.storybook/preview.jsimport '@/assets/styles/global.scss'
起動する
$ npm run storybook