Static assets missing in Storybook

I have an Nx monorepo with assets in a shared library. These are correctly brought into the app and it serves correctly. The assets are at libs/monkey-assets/src/lib/ and this is added as a path in the base tsconfig.json:

"@monkey/assets/*": ["libs/monkey-assets/src/lib/*"],


And in the project.json:

"stylePreprocessorOptions": {
"includePaths": [
"libs/monkey-styles/src/lib"
]
},
"assets": [
{
"glob": "**/*",
"input": "libs/monkey-assets/src/lib",
"output": "monkey-assets"
},
...


Within components etc, this is fine. I use code like this:

<ion-icon class="divider-line" src="monkey-assets/icons/misc/divider-line.svg" />

Issue


When I run storybook, the static assets are missing. I had a bit of play around with the storybook main.ts:

staticDirs: [{ // angular static asset handling - moves shit to where the template expects it to be.
// from: '../src/assets', // old code
// from: '@monkey/assets/', // wht I want!
from: '../../../libs/monkey-assets/src/lib',
to: 'monkey-assets'
}],


I can see an old looking asset file in the dist folder but my new stuff doesn't seem to work...

1. Will storybook start working again if the assets get successfully copied into dist/storybook/my-app/monkey-assets?
2. why is the code above not achieving this? I'm only assuming that's what it's for, since I can't find anything in the docs.
3. Why won't storybook allow me to use the much neater form from: '@monkey/assets/'? I defined the path in tsconfig.base.json and inherited it into the tsconfig.json in storybook. Again, I'm assuming this should work? ...

Continue reading...