Custom styles don't load properly

[AdrianoCahete]

I'm following the documentation here and, when I do in this way, the css call is made, but in the browser, the call is to http://<url>:4000/style.css#/, like a react router URL. (which trhows a default html to load instead of css content).

If I change the way is calling and set the styles in React Catalog component in index.js file, the compile throws an error:

index.js

(...)
import style from "./static/style.css";

(...)
ReactDOM.render(
  <Catalog
    title='Name'
    pages={pages}
    logoSrc={logo}
    styles={style}
  />,
  document.getElementById('catalog')
);

Console:

Failed to compile

./catalog/static/style.css
Module build failed: Syntax Error 

(1:1) Unknown word

> 1 | module.exports = __webpack_public_path__ + "static/media/style.f4288942.css";
    | ^

There's an working example that custom css is working?

I see that in one of the example site, this custom css is working, but i didn't find the source project.

[craigpryde]

Hit this issue today. Hopefully, i can explain a little bit about what's happening:

Returns HTML The issue here is that when catalog serves itself it sets the static folder as the root route. This means that when you do a style import using the documented method the CSS file must be in the static folder else the router will not be able to locate the asset.

The react-router is returning the default route because the file you requested does not exist within the URI you provided.

Working solution Folder structure:

| catalog
| - static
| - | - app.css

then inside of the index.js define your stylesheet location:

const styles = [
  'app.css'
];

The attach the styles to the rendered component via the style prop:

<Catalog title=""  styles={styles} />,

This should now enable you to load the custom stylesheet and you should see it working.

Hope this helps.