#reactjs #webpack #next.js #storybook
#reactjs #webpack #next.js #сборник рассказов
Вопрос:
Моя файловая структура похожа на [next.js ][1] репо. Так что это похоже:
| components
|-- headline.tsx
|-- headline.stories.tsx
| public
|-- font
|--|-- myfont.woff
В заголовке используется определенный шрифт, который импортируется туда.
Для запуска сборника рассказов я использую start-storybook -s ./public . Таким образом, все файлы из общей папки включены в dev-build.
На следующем шаге я хочу развернуть все материалы на странице github. Итак, создайте stufff storybook-build и разверните его npx gh-pages -d storybook-static . Результат: сборник рассказов работает, и заголовок есть. НО шрифт неправильный. Это потому, что шрифт импортируется с абсолютным путем /font/myfont.woff . Это приводит к URL-адресу github-pages, подобному этому https://blubber.github.io/font/myfont.woff , но так и должно быть https://blubber.github.io/MYPROJECT/font/myfont.woff .
Итак, мне нужен способ переписать ВСЕ пути в проекте, но только если storybook хочет создать производственный материал. Есть идеи?
Мои идеи:
- используйте
<base>-tag в<head>сборнике рассказов, но это работает только с относительными путями - добавьте publicPath в main.js like
config.output = { publicPath: 'https://blubber.github.io/MYPROJECT/'}=> Это не приведет к перезаписи путей в css
Кто-нибудь может здесь помочь? [1]: https://github.com/vercel/next.js