Как установить рутовую директорию для webpack.config.js?

Question

[Анастасия Панфилова]

Доброго времени суток
Суть в том, что я хочу подключить storybook для своего react проекта на typescript
Прочитала документацию для storybook, какой конфиг нужен для проекта на typescript
Все хорошо, все заработало, осталось только одно "но":

Module not found: Error: Can't resolve 'theme' in 'E:\projects\projectName\src\components\common\ButtonPrimary'

Вот код этого небольшого компонента:

// use styled-components
import styled from 'theme'

const ButtonPrimary = styled('button')`
  border-radius: 4px;
  height: 56px;
  background-color: transparent;
  font-size: ${props => props.theme.sizes.text.extraLarge};
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  background-color: ${props => props.theme.colors.primaty};
  border: solid 1px ${props => props.theme.colors.primaty};
  color: ${props => props.theme.colors.default};
  &:hover {
    background-color: ${props => props.theme.colors.darkPrimary};
  }
`

export default ButtonPrimary

Если я меню путь как в примере ниже, то все работает
import styled from '../../../theme'

Я так понимаю, мне нужно обозначить для вебпаковского конфига рутовую директорию (или что-то в этом роде). Как я могу это сделать? Я посмотрела как это реализовано (как я полагаю) в react-scripts-ts, но это породило лишь новые ошибки

webpack.config.js

const path = require('path')
const TSDocgenPlugin = require('react-docgen-typescript-webpack-plugin')
const include = path.resolve(__dirname, '../src')

module.exports = (baseConfig, env, config) => {
  config.module.rules.push({
    test: /\.(ts|tsx)$/,
    loader: require.resolve('awesome-typescript-loader'),
    include,
  })
  config.plugins.push(new TSDocgenPlugin()) // optional
  config.resolve.extensions.push('.ts', '.tsx')
  return config
}

Так же файловая структура: