Storybook: Storybook not recognizing assets folder? 'Error: Can't resolve fonts...'

[eendkonijn]

Hello, I'm having trouble loading fonts in Storybook. Here's what's going on. I haven't made a reproducible example yet, I hope someone can help me with just some code snippets.

So:

I have a file that loads fonts:
path from root: /packages/styles/src/variables/_fonts.scss

@font-face { font-family: "Ciutadella"; src: url("fonts/Ciutadella/35A006_0_0.woff2") format("woff2"), url("fonts/Ciutadella/35A006_0_0.woff") format("woff"); font-weight: $font-weight-light; font-style: normal; }

I have a Storybook script:
"storybook": "start-storybook -p 6006 -s ./assets/"

I have an assets folder located in root
containing fonts/Ciutadella/35A006_0_0.woff2 and fonts/Ciutadella/35A006_0_0.woff.

I get the following error when running storybook:

ERROR in ./.storybook/storybook.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ref--14-2!./.storybook/storybook.scss) Module build failed (from ./node_modules/css-loader/dist/cjs.js): Error: Can't resolve 'fonts/Ciutadella/35A006_0_0.woff' in 'C:\Projects\root-folder\.storybook'

It is as if Storybook is not recognizing the assets folder, or not accepting that the fonts should be located there. Anyone have some suggestions as to whats wrong here? Thanks

Storybook that I'm running:

• @storybook/react ^6.0.16

[Marklb]

If I am understanding this from what you have provided, it looks like you are defining the static assets path with the -s arg, which is the path for your statically hosted assets at runtime, but the loader is trying to process those files at build time.

I don't know how that .scss file is being used, so I don't know if there is a required solution for it to fit your projects configuration.

I was only reading the error and not the /packages/styles/src/variables/_fonts.scss path you mentioned, so my first suggestion may not actually be right for your project, but probably all I can suggest without more info.

If you just need to fix the error, then changing your font urls to paths relative to the sass file should let the loader find them. By doing that, the fonts will be moved to the static assets directory that storybook hosts by default and the paths would be rewritten to that path in the output for you as well.
Example:

// ./storybook/storybook.scss
@font-face {
    font-family: "Ciutadella";
    src: url("../assets/fonts/Ciutadella/35A006_0_0.woff2") format("woff2"),
         url("../assets/fonts/Ciutadella/35A006_0_0.woff") format("woff");
    font-weight: $font-weight-light;
    font-style: normal;
}

If instead you need those urls to stay like that in the output, so that they are loaded relative to the baseUrl at runtime in the browser, then you can probably add an exclusion to that loader in the webpack config. Without knowing more about your project, I would just be guessing at the webpack change.

[eendkonijn]

Thank you Mark, this put me on the right track. It's not that Storybook isn't recognizing the assets folder, it is that css loader can't find the files.

I solved my problem so this can be closed.

[0xsven]

Thank you Mark, this put me on the right track. It's not that Storybook isn't recognizing the assets folder, it is that css loader can't find the files.

I solved my problem so this can be closed.

How did you solve it?