Menu
I'm building a frontend app using NextJS v.13 and this will be a generic frontend codebase that will be used by multiple sites.
I want to have:
And when I build the codebase for site1 I want to somehow tell the app to use button.site1.css when building.
Basically I want to achieve the following:
.env.local
HOST_NAME=site1
About.js
import styles from `./Button.${process.env.HOST_NAME}.scss`; // This doesn't work. "Imports must be string literals"
const About = () => {
<div>
<h1 className={styles.h1}">About Page</h1>
</div>
)
}
517
Although @Felix Eklöf has recommended a very nice approach by programmatically renaming files. Here's something more simple, suitable, and convenient.
Just import both the styles in your component and depending on the variable from .env file use the one that is needed. Next.js automatically tree-shakes extra classes that are not used, so you don't have to worry about performance in production or making production have large CSS.
import styles1 from "your-styles1.module.scss";
import styles2 from "your-styles2.module.scss";
const styles = process.env.HOSTNAME === "host1" ? styles1 : styles2;
Much straightforward and easier to implement. Right?
If you are looking for conditionally adding global styles. Use link inside next/head instead.
First, put your styles inside public directory. Then, withing your _app.jsx
// do not import global styles that are scopped to specific HOST,
export default function(...) {
const styleSheetLink = getStyleSheetLink(process.env.HOSTNAME) // some logic to detect appropreate stylesheet.
...
return (
<>
<Head>
<link href={styleSheetLink} .../>
</Head>
...
</>
)
...
}
To enable CSS Optimization, you need to install critters and enable CSS Optimization.
// next.config.js
...
experimental: { optimizeCss: true }
...
}
And
yarn add critters
Here's one option, not sure if it will fit your problem entirely.
So, you have button.site1.css, button.site2.css etc.
Add the env variable HOST_NAME=site1 as you suggested.
Write a java/bash- script that copies either button.site1.css or button.site2.css based on HOST_NAME into a common name like just button.css.
In your react components you import button.css instead.
import styles from `./button.css`;
package.json add that script in prebuild.{
"name": "npm-scripts-example",
"version": "1.0.0",
"description": "npm scripts example",
"scripts": {
"prebuild": "node copycss.js",
"build": "next build",
}
}
EDIT
I was unable to try it earlier, but here's and example of copy script. I tried it in a fresh next.js project and it worked.
./copy-css.js
const fs = require('fs')
const site = process.env.HOST_NAME
fs.copyFileSync(`./styles/button.${site}.css`, `./styles/button.css`)
I'm guessing you have more files than just button, then you could put all site-specific CSS files in a separate folder and search it in the copy-css.js script and run the copyFileSync on each file.
34
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
