Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Packing CSS images

See original GitHub issue

When there is an image or a font embedded in the CSS, it is not loaded in the storybook. I tried adding

{ test: /\.(png|jpe?g)(\?.*)?$/, loader: 'url?limit=8182' },
{ test: /\.(svg|ttf|woff|eot)(\?.*)?$/, loader: 'file' }

but this only solves the resolution of the file, yet it is not loade from the correct URL. For example this fails for icon files in semantic ui and bootstrap:

GET http://localhost:9001/themes/default/assets/fonts/icons.ttf  404

Issue Analytics

State:
Created 7 years ago
Reactions:1
Comments:16 (12 by maintainers)

Top GitHub Comments

2reactions

roonyhcommented, Jul 26, 2016

@tomitrescak @purplecones there could be more than one static directories. You can pass them to storybook -s as a comma separated list. So you can do,

start-storybook -p 9001 -s ./assets,/path/to/themes/directory

picked this info from #229

1reaction

purpleconescommented, Jul 26, 2016

@roonyh that did it. Thanks for that insight!

Top Results From Across the Web

Packed image flow in html / javascript / css - Stack Overflow

Is there some algorithm and way to control the packing of the collection of images to minimize white-space or otherwise non-appealing looks? If ......

How to wrap the text around an image using HTML and CSS

Example 1: In this example, the image is floating right side of the screen and the text is wrapping the image. We don't...

Packing CSS images #37 - storybookjs/storybook - GitHub

When there is an image or a font embedded in the CSS, it is not loaded in the storybook. I tried adding {...

Wrapping Text Around Images - CSS

Wrapping Text Around Images · The first <BR> places the text directly above the image. · The image is aligned left, so it...

Wrapping Content around images using CSS Shapes - Medium

When we wrap text around graphic elements (PNGs, JPGs, SVGs, etc…) it helps the image to stand out. It makes the image more...