Reactjs 重写要在github页面上部署的storybook构建的所有路径_Reactjs_Webpack_Next.js_Storybook

Reactjs 重写要在github页面上部署的storybook构建的所有路径

reactjs webpack next.js

Reactjs 重写要在github页面上部署的storybook构建的所有路径,reactjs,webpack,next.js,storybook,Reactjs,Webpack,Next.js,Storybook,我的文件结构类似于[next.js][1]repo。所以就像： | components |-- headline.tsx |-- headline.stories.tsx | public |-- font |--|-- myfont.woff 标题使用一种特定的字体，该字体在此处导入要启动故事书，我使用启动故事书-s./public。因此，公共文件夹中的所有文件都包含在开发版本中在下一步中，我想将所有内容部署到github页面。因此，构建stuffstorybook b

我的文件结构类似于[next.js][1]repo。所以就像：

| components  
|-- headline.tsx  
|-- headline.stories.tsx
| public  
|-- font  
|--|-- myfont.woff

标题使用一种特定的字体，该字体在此处导入

要启动故事书，我使用

启动故事书-s./public

。因此，公共文件夹中的所有文件都包含在开发版本中

在下一步中，我想将所有内容部署到github页面。因此，构建stuff

storybook build

并部署它

npx gh pages-d storybook static

。结果：故事书起作用了，标题就在那里。但是字体不对。这是因为导入字体时使用了绝对路径

/font/myfont.woff

。这将导致一个github页面url，如下所示

https://blubber.github.io/font/myfont.woff

但它应该是

https://blubber.github.io/MYPROJECT/font/myfont.woff

因此，我需要一种重写项目中所有路径的方法，但前提是storybook想要构建生产内容。有什么想法吗

我的想法是：

在storybook的

中使用

-标记，但这仅适用于相对路径

在main.js中添加publicPath，如

config.output={publicPath:'https://blubber.github.io/MYPROJECT/'}

=>这不会重写css中的路径

有人能帮忙吗？ [1] :