React-styleguidist: Including External CSS

[kevinehosford]

I'm having an issue and wondering if there's a option in the configuration to address it. My component styles are maintained outside of the components and not directly imported by them (dir structure example below). For deploys, the styles are compiled separately and included in the document head.

My issue is: I can't seem to instruct react-styleguidist to include them.

I've tried specifying a custom template that points to the built styles; however, all the paths I've tried return a 404 (can't get the path right). If I can get that correct it would be a workable solution. I would lose file watching and reloading though.

Are there any other approaches I should look at?

src
 |- components
 |- styles
     |- index.css

[sapegin]

Have you tried this solution?

[kevinehosford]

@sapegin that was exactly what I needed. Thanks!

[chardos]

Would love to see the solution, link seems to be broken?

[sapegin]

@chardos I’ve updated a link.

[chardos]

@sapegin That was an incredibly fast response. Thanks man!

[sapegin]

@chardos Morning coffee works very well ☕️🚀

[dchambers]

Is there a way to import CSS directly into the index page without using a require as this doesn't seem to be compatible with the webpack config used by create-react-app?

[neutraali]

I might have the same question as @dchambers has... We'd like to include a _local_ CSS -file in the template:

<link rel="stylesheet" href="<%= process.env.baseUrl %>static/css/all.css" />

... This naturally gives a 400 -error and is unable to locate/use the file.

[usamamashkoor]

@neutraali did you find a way to include local css in your react app i am facing the same issue here ..?

[neutraali]

Hey @usamamashkoor, not with react-styleguidist at least. I was only trying to get a quick look on how the lib would work. It didn't - So I quickly moved on to other solutions. :cat: