Dynamically importing a .SCSS or CSS

[PhibeeDeinla]

Summary

I'm experiencing an issue when importing .scss or .css files in a layout that relies on environment variables or dynamic values. My goal is to select the appropriate .scss file based on the environment variable NEXT_PUBLIC_TENANT. For example, if NEXT_PUBLIC_TENANT is set to 'afribus', it should import 'afribus-main.scss'. This approach works during Next.js runtime, although an error appears in the terminal, but it fails during the build process. I'm using Next.js 16.

During Runtime

Build Error.

Additional information

No response

Example

No response

[armaan-71]

You can’t dynamically import CSS or SCSS using variables in Next.js. Style imports must be static so the bundler can resolve them at build time, which is why it may work in dev but fails during build, especially with Turbopack. Instead, import all possible styles statically, use separate builds per tenant, or load the stylesheet with a <link> tag at runtime.