Storybook: Reference to local files

Created on 24 May 2016 · 4Comments · Source: storybookjs/storybook

Hi,

How would one reference say some local .css file that's located in dist folder next to my .storybook folder?

I've seen the examples of using head.html but every example has references to anything else but local files.

Br,
Dan

discussion

Source

dgsunesen

Most helpful comment

Hi Dan,

You can use the -s --static-dir argument to serve additional files. Try changing your npm script to something like this:

{
  ...
  "scripts": {
    "storybook": "start-storybook -p 9001 -s ./dist"
  }
  ...
}

dist/style.css should be available at http://localhost:9001/style.css

mnmtanish on 24 May 2016

👍9 🎉3

All 4 comments

Hi Dan,

You can use the -s --static-dir argument to serve additional files. Try changing your npm script to something like this:

{
  ...
  "scripts": {
    "storybook": "start-storybook -p 9001 -s ./dist"
  }
  ...
}

dist/style.css should be available at http://localhost:9001/style.css

mnmtanish on 24 May 2016

👍9 🎉3

Cheers @mnmtanish. That solved it!

dgsunesen on 25 May 2016

🎉2

Just to help if anyone else runs into this, I wasn't having much luck finding how to import a CSS file with @font-face declarations, but got this working in @storybook/vue 5.0.0-rc.5. There was a little additional complexity in figuring out the paths because we keep configuration files in a subdirectory.

/
├── assets/
│   └── fonts/
│      └── OpenSans/
│         └── OpenSans-Regular.ttf
├── config/
│   └── .storybook/
│      └── preview-head.html
├── src/
│   └── app/
│      └── styles.css
└── package.json

<!-- preview-head.html -->
<link rel="stylesheet" href="./app/styles.css" />

/* styles.css */
@font-face {
  font-family: 'Open Sans';
  src: url('./../../assets/fonts/OpenSans/OpenSans-Regular.ttf')
  format('truetype');
}

And finally, the npm script:

> start-storybook -c config/.storybook -p 8081 -s ./,./src

The ticket here was including the ./ in the script because when loading the page it's looking for localhost:8081/assets/fonts/OpenSans/OpenSans-Regular.ttf, and thus the static directory needs to be at the root directory given this structure.

Jack-Barry on 12 Mar 2019

👍2

@mnmtanish
Hi, I'm loading some external css and js in my preview-head.html like described above with --static-dir, and they're loading great, with sourcemaps and everything!

However, storybook doesn't reload when those files change. Is there a way to do that?