Global CSS import

[equinusocio]

Hi, i just added a top-level global style import like said in doc

styles: ['/assets/css/global.css']

I tried both with /assets/css/global.css putting the file inside static/assets/css and with /global.css putting the css at the catalog root. But nothing seems to work.

[equinusocio]

@herrstucki Any suggestion?

[nilsnh]

Let's see.

If the main.css is incatalog/static/main.css.

You can do like so:

import React from "react";
import ReactDOM from "react-dom";
import { Catalog, pageLoader } from "catalog";

const pages = [
  {
    path: "/",
    title: "Welcome",
    content: pageLoader(() => import("./WELCOME.md"))
  },
  {
    path: "/test",
    title: "Test page",
    content: pageLoader(() => import("./test.md"))
  }
];

ReactDOM.render(
  <Catalog title="Catalog" styles={['/main.css']} pages={pages} />,
  document.getElementById("catalog")
);

[equinusocio]

I found a workaround by importing the css inside the catalog/index.js.

import css from "./static/assets/css/global.css";

The way descriped inside the doc it still does not work.

[danieldunderfelt]

I have the same issue. When I inspect the request for the CSS file in the browser, I see that the Catalog server returned the HTML file. It's as if the server doesn't know what to do with CSS files and just returns the HTML as a fallback.

[jstcki]

@danieldunderfelt The returned HTML is an indication that the file doesn't exist. Actually it should properly return a 404 but I'm not completely sure if that's possible with WebpackDevServer's historyAPIFallback option.

[jstcki]

I've just noticed that the styles listed in the styles config option only seem to get loaded on the index page but not the others.

[jstcki]

As a workaround, you can do what @equinusocio mentioned in https://github.com/interactivethings/catalog/issues/350#issuecomment-358768490 or add this to the catalog/index.html:

  <link rel="stylesheet" href="%PUBLIC_URL%/global.css">

[danieldunderfelt]

Thanks for looking into this! I'm using @equinusocio import method for now.

[rossmoody]

I found a workaround by importing the css inside the catalog/index.js.

import css from "./static/assets/css/global.css";

The way descriped inside the doc it still does not work.

For designer/code newbies like myself, you'll also need to call it in the ReactDOM.render tags towards the bottom with css={css}.