[REACT] Correct way to include CSS themes with multiple products

[dennyferra]

Using Bryntum 5.6.6:

I'm using multiple Bryntum products (Grid, Scheduler, Core) and the respective thin versions of the packages. I would like to support switching themes in my app so I followed the guide to allow multiple themes (https://bryntum.com/products/grid/docs/guide/Grid/integration/react/guide#selecting-from-multiple-themes). The postinstall runs correctly and themes and fonts get copied to my public directory. I've added the stylesheets but when I run my app the fonts can't be located:

GET http://localhost:4200/themes/@bryntum/core-thin/fonts/fa-solid-900.woff2 net::ERR_ABORTED 404 (Not Found)
GET http://localhost:4200/themes/@bryntum/core-thin/fonts/fa-solid-900.ttf net::ERR_ABORTED 404 (Not Found)

I'm using the following postinstall:

    "postinstall": {
        "node_modules/@bryntum/core-thin/*.css*": "copy apps/leap/public/themes/",
        "node_modules/@bryntum/core-thin/fonts": "copy apps/leap/public/themes/fonts",
        "node_modules/@bryntum/grid-thin/*.css*": "copy apps/leap/public/themes/",
        "node_modules/@bryntum/schedulerpro-thin/*.css*": "copy apps/leap/public/themes/"
    },

and I link the CSS file in my app:

<link rel="stylesheet" href="/themes/core.classic-dark.css" data-bryntum-theme />
<link rel="stylesheet" href="/themes/grid.classic-dark.css" data-bryntum-theme />
<link rel="stylesheet" href="/themes/schedulerpro.classic-dark.css" data-bryntum-theme />

Am I missing anything?

Thank you for the support!

[khattakdev]

Hi dennyferra,

What build tool are you using? Is it Vite or create-react-app?
I recommend you to use Vite.

Can you share some files that let me reproduce the issue on my end?

[dennyferra]

This is a Next.js app (version 13.4.2) that is part of a monorepo (using nx), using webpack by default. However, I'm not sure Next is transpiling the css files that I copied to my public directory since I'm just referencing the css through a stylesheet

<link rel="stylesheet" href="/themes/core.classic-dark.css" data-bryntum-theme />

If I try to import the css through my tsx file:

import '../public/themes/core.classic-dark.css';

then I get a webpack error

HookWebpackError: Cannot find module './@bryntum/core-thin/fonts/fa-solid-900.woff2'

Seems like I need to modify the webpack config in my Next.js app to properly transpile the css file. But I'd like to use the stylesheet reference (so I can swap themes). Perhaps I need a custom build step to transpile the Bryntum css files and then place them in my public directory?

[dennyferra]

Attached a sample nx + next project that shows the error. Note: this does not do the postinstall steps, I import the core/grid css in apps/leap/app/layout.tsx

To run:

yarn && yarn nx run leap:serve:development

[khattakdev]

Since you're using nx Here's an approach that will work in this case.

• You can copy the files to public/themes using postinstall. Copy the files to public/themes using postinstall (as you shared in the question initially).
• Change the CSS paths:
  import '../public/themes/core.classic-dark.css';
  import '../public/themes/grid.classic-dark.css';
  

  in the layout.tsx
• Lastly, you have to update the font URL in the CSS files from @bryntum/core-thin/fonts/fa-solid-900.woff2 to ./fonts/fa-solid-900.woff2 everywhere.

That should fix the issue. Your project is using nx - which is causing some kind of issue with CSS files but for reference, you can check our demos to understand how it's usually done.

[dennyferra]

I've implemented the postinstall and scripted the replacement of the paths in the copied CSS files. Everything looks good and I'm able to switch between themes now.

Thank you for the help.