[storybook Chakra UI] #frontend #storybook #template

main.js

const path = require('path');

module.exports = {
  stories: [
    '../stories/**/*.stories.mdx',
    '../stories/**/*.stories.@(js|jsx|ts|tsx)',
    '../components/**/*.stories.@(js|jsx|ts|tsx)',
  ],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    {
      name: '@storybook/preset-scss',
      options: {
        cssLoaderOptions: {
          modules: true,
        },
        sassLoaderOptions: {
          sassOptions: {
            includePaths: [
              path.resolve(__dirname, '../styles'),
              path.resolve(__dirname, '../node_modules'),
            ],
          },
        },
      },
    },
  ],
  webpackFinal: async (config) => {
    return {
      ...config,
      resolve: {
        ...config.resolve,
        alias: {
          ...config.resolve.alias,
          '@emotion/core': path.join(process.cwd(), 'node_modules/@emotion/react'),
          'emotion-theming': path.join(process.cwd(), 'node_modules/@emotion/react'),
        },
      },
    };
  },
};

npm.sh

yarn add -D @storybook/preset-scss css-loader sass-loader@10 style-loader

preview.jsx

import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import React from 'react';

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

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

const theme = extendTheme({
});

export const decorators = [
  (Story) => (
    <ChakraProvider theme={theme} resetCSS={true}>
      <Story />
    </ChakraProvider>
  ),
];