Production styling differs from development styling

[clairefro]

Some of our custom styles have been appearing differently in production vs development, such as font size, code block colors, footer colors, etc.

It may have to do with how Docusaurus is using webpack for production build - custom.css appears not to be the "last word" when it comes to styling. A workaround is to use !important for our custom styles.

facebook/docusaurus#3678

[clairefro]

facebook/docusaurus#3879 (comment)

A better solution is to use substring matching selectors for those long complicated classes with @docusaurus in them

We are using CSS modules, so this class names like .docTitle_node_modules-@docusaurus-theme-classic-lib-theme-DocItem- will not work in a production build. For this to work, you need to use substring matching selector:

[class^="docTitle"] {
     font-size: 2rem;
}

"Swizzling" (❓) was another suggested solution but I don't really get what that is, and Docusaurus' own docs discourage its use at them moment

[clairefro]

Resolved by #41