I have multi-lingual app and i want to import bootstrap.min.css if locale is en and import rtl.min.css if locale is ar:
layout.js
if (locale === "ar") {
import("bootstrap/dist/css/bootstrap.rtl.min.css");
} else {
import("bootstrap/dist/css/bootstrap.min.css");
}
this approach is not working as it will import both files for some reason, how to import them conditionally based on locale ?
I have multi-lingual app and i want to import bootstrap.min.css if locale is en and import rtl.min.css if locale is ar:
layout.js
if (locale === "ar") {
import("bootstrap/dist/css/bootstrap.rtl.min.css");
} else {
import("bootstrap/dist/css/bootstrap.min.css");
}
this approach is not working as it will import both files for some reason, how to import them conditionally based on locale ?
Share Improve this question edited Feb 16 at 0:02 aasem shoshari asked Feb 15 at 23:53 aasem shoshariaasem shoshari 2001 gold badge3 silver badges14 bronze badges1 Answer
Reset to default 0I had to use link in head tag:
export default async function RootLayout({ children, params }) {
...
locale === "ar"
? "https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.rtl.min.css"
: "https://cdn.jsdelivr/npm/[email protected]/dist/css/bootstrap.min.css";
return (
<html lang={locale} dir={dir}>
<head>
<link rel="stylesheet" href={bootstrapCss} />
</head>
<body className={`${roboto.className} sans-serif`}>
<NextIntlClientProvider messages={messages}>
<Header />
{children}
</NextIntlClientProvider>
</body>
</html>
);
}