Reference to local files

[dgsunesen]

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

[thani-sh]

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

[dgsunesen]

Cheers @mnmtanish. That solved it!

[Jack-Barry]

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.

[lambert-velir]

@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?

[alanoakden]

Just to check

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

Works great locally for me if I have <link href="http://localhost:9001/styles.min.css" rel="stylesheet"> in preview-head.html, but if I were to build my storybook to host it, I can only assume that wouldn't work?