CRA + Storybook + Emotion

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을 설정하는 코드입니다. 다른 설정도 포함되어있지만 함께 올려둡니다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.