const path = require('path'); const { addWebpackAlias, addBundleVisualizer, addBabelPreset, override, } = require('customize-cra'); const rewireReactHotLoader = require('react-app-rewire-hot-loader-for-customize-cra'); module.exports = override( rewireReactHotLoader(), addWebpackAlias({ 'react-dom': '@hot-loader/react-dom', '~': path.resolve(__dirname, './src'), }), // emotion css prop preset addBabelPreset('@emotion/babel-preset-css-prop'), addBundleVisualizer( { analyzerMode: 'static', reportFilename: 'report.html', }, true, ), );
const custom = require('../config-overrides'); module.exports = { stories: ['../src/**/*.stories.js'], addons: [ '@storybook/preset-create-react-app', '@storybook/addon-actions', '@storybook/addon-info', '@storybook/addon-links', '@storybook/addon-viewport/register', '@storybook/addon-knobs/register', '@storybook/addon-backgrounds/register', '@storybook/addon-a11y/register', '@storybook/addon-docs/react/preset', ], webpackFinal: storybookConfig => { const customConfig = custom(storybookConfig); return { ...storybookConfig, module: { ...storybookConfig.module, rules: customConfig.module.rules }, }; }, };
CRA에 react-app-rewired, customize-cra를 사용하면서 storybook과 emotion css prop을 설정하는 코드입니다. 다른 설정도 포함되어있지만 함께 올려둡니다.