Разрешить импорт абсолютных / псевдонимов в компонентах с помощью сборника рассказов

Question

Я использую gatsby-plugin-alias-imports, чтобы иметь возможность выполнять абсолютный импорт следующим образом: import { colors } from "@styles/theme"; Это установлено в gatsby-config. Теперь я только что добавил сборник рассказов в свой проект. Поскольку сборник рассказов не запускается через gatsby, импорт псевдонимов не разрешается, и я получаю сообщение об ошибке:

ОШИБКА в ./src/components/Button/index.js Модуль не найден: Ошибка: не удается разрешить '@ styles / theme' в ...

Это имеет смысл. Сборник рассказов не знает, что делать с @styles..., но как я могу это исправить?

Answer 1

Похоже, вам нужно создать пользовательский конфиг babel для сборника рассказов. Включите туда свои конфигурации gatsby-plugin-alias-imports

https://storybook.js.org/docs/configurations/custom-babel-config/

Answer 2

Вам необходимо настроить Webpack для Storybook так, чтобы он следовал той же директиве, добавив ./src к массиву разрешения. В своем файле .storybook/webpack.config.js добавьте это к телу экспортируемой функции (при условии, что вы деструктурируете config из первого аргумента):

config.resolve.modules = [
  path.resolve(__dirname, "..", "src"),
  "node_modules",
]

Ваш файл webpack.config.js должен выглядеть примерно так это когда вы закончите:

const path = require("path")

module.exports = ({ config }) => {
  // a bunch of other rules here

  config.resolve.modules = [
    path.resolve(__dirname, "..", "src"),
    "node_modules",
  ]

  // Alternately, for an alias:
  config.resolve.alias: {
    "@styles": path.resolve(__dirname, "..", "src", "styles")
  }

  return config
}