Ant Designのカスタマイズ内容をStorybookに反映するための設定
Ant Design(antd)のテーマをカスタマイズした内容をStorybookに反映する場合、少しややこしい設定が必要になるのでメモ
前提
- プロジェクト本体はcreate-react-appで作成
- TypeScriptを使用
- antdのバージョンは3.7.3
設定方法
例: デフォルトのfont-familyを変更したい場合
antdTheme.js
module.exports = { '@font-family': '-apple-system, Sans-Serif' }
.storybook/webpack.config.js
const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js') const tsImportPluginFactory = require('ts-import-plugin') const modifyVars = require('../antdTheme') const path = require('path') module.exports = (baseConfig, env) => { const config = genDefaultConfig(baseConfig, env) config.module.rules.push({ test: /\.tsx?$/, exclude: /node_modules/, include: [/src/], loader: 'ts-loader', options: { getCustomTransformers: () => ({ before: [ tsImportPluginFactory({ libraryName: 'antd', libraryDirectory: 'lib', style: true, }), ], }), }, }) config.resolve.extensions.push('.ts', '.tsx') config.module.rules.push({ test: /\.less$/, use: [ { loader: 'style-loader', }, { loader: 'css-loader' }, { loader: 'less-loader', options: { modifyVars }, }, ], include: path.resolve(__dirname, '../src/', '../node_modules/'), }) return config }