Globally Importing CSS and JS to Boards

The boardGlobalSetup key (a string) allows you to specify which modules should be evaluated before boards are rendered in your project. You can statically import CSS and JS files, or dynamically append links to external stylesheets and scripts to the document head in order to ensure that the necessary styling and functionality are loaded before the board is displayed. This ensures that the board renders properly and functions as intended.
In this example, we're globally importing the Wix Madefor Typeface so that it can be used project-wide in our project's boards:
1
2
/* app.css */
@import url('https://static.parastorage.com/unpkg/@wix/wix-fonts@1.11.0/madefor.css');
1
2
3
// boards-global-setup.ts
import './app.css';
document.body.style.color = 'red';
In this example, we're importing a custom CSS property (variable) to use in boards project-wide:
1
2
3
4
/* app.css */
body {
  --main-bg-color: brown;
}  
1
2
// boards-global-setup.ts
import './app.css';
In codux.config.json, you just need to point to the setup file like this:
1
2
3
4
{  
    "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
    "boardGlobalSetup": "./src/boards-global-setup.ts"
}
Previous article
Next article