Storybook: Include css from assets folder return "Refused to include..." error

[JEricaM]

Hi, I'm including Font Awesome inside my Storybook Stencil project.
This is my project structure

|-> src
    |-> assets
        |-> fontawesome
            |-> css
                |-> all.css
|-> .storybook
    |-> manager-head.html
    |-> preview-head.html

In order to make font awesome work inside storybook, as I read in the doc, I need to include inside manager-head and preview-head this reference
rel="stylesheet"
type="text/css"
href="../src/assets/fontawesome/css/all.css"
/>

But when I start storybook, I have this problem:

The full error is:

Refused to apply style from 'http://localhost:6007/src/assets/fontawesome/css/all.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

I don't know why the error said MIME type ('text/html'), because I wrote type="text/css"
The path it's correct but and I don't know why I have this error.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[Hypnosphi]

@JEricaM what do you see if you open http://localhost:6007/src/assets/fontawesome/css/all.css in your browser?

[Hypnosphi]

@JEricaM You probably have to pass src/assets as statics directory to storybook commands:

// package.json
{
  ...
  "scripts": {
    ...
    "storybook": "start-storybook -p 6006 -s ./src/assets",
    "build-storybook": "build-storybook -s ./src/assets"
  }
}

Then change the reference to all.css:

// preview-head.html
<link rel="stylesheet" type="text/css" href="fontawesome/css/all.css" />

You shouldn't need manager-head at all, because you probably only want font awesome inside your own stories.

Here's an example of working setup: https://github.com/Hypnosphi/storybook-fontawesome-repro

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!