1

I have an issue only when I generate the static bundle of my storybook

I work with a monorepo (using nx) and I have a scss variable : $icon-path: "/assets/images"; I use this variable to load my asset in my scss file and it works fine with local dev server, for example when I use nx to serve the storybook : nx run ui-common:storybook or for my main web angular application

But when I use the static files that I deploy to a github page there is an issue because the style try to fetch the asset using '/assets/name.svg' instead of '/pages/${git-organisation}/${repo}/assets/name.svg'

Same issue when I open the index.html file locally.

When I generate my webpack bundle, I noticed that I have a file named main.a72dcadb.iframe.bundle.js and into it I have this css background-image: url("/assets/name.svg"); but probably what I'm looking for is background-image: url("./assets/name.svg");

I tried to play with webpack plugins and rules https://github.com/postcss/postcss-url, and some other stuff like How can I use static assets on scss with storybook? but I feel I don't understand how to configure webpack correctly. I also tried to change the staticDirs and publicPath webpack config, but this is not what I'm looking for. Asset are copied, and publicPath do not change the (s)css, only scripts path of my index.html.

storybook version

"@storybook/core-server": "6.5.9",
"@storybook/addon-docs": "~6.4.22",
"@storybook/addon-essentials": "6.5.9",
"@storybook/angular": "6.5.9",
"@storybook/builder-webpack5": "6.5.9",
"@storybook/manager-webpack5": "6.5.9",

nx version

"@nrwl/cli": "14.3.2",
"@nrwl/storybook": "14.3.2",

So I would like to know if it's possible to fix this issue using webpack5 config or plugin. This is the first time I try to configure webpack, I have read some git issue, webpack docs, storybook docs, @nrwl/storybook docs but I was lost in all theses informations. So I'm looking for someone who can explain me if this issue can be solved by webpack, if yes how we can achieve that.

I also tried to migrate to latest nx workspace version but this did not solve my issue.

Shining
  • 425
  • 6
  • 20

0 Answers0