diff --git a/packages/docusaurus/src/client/App.tsx b/packages/docusaurus/src/client/App.tsx
index d7d4cd4eb78e0..e4fd51ac97eef 100644
--- a/packages/docusaurus/src/client/App.tsx
+++ b/packages/docusaurus/src/client/App.tsx
@@ -16,6 +16,26 @@ import DocusaurusContext from './exports/context';
import PendingNavigation from './PendingNavigation';
import './client-lifecycles-dispatcher';
+import './hideCSSLoadingWarning.css';
+
+function CSSLoadingWarningMessage() {
+ return (
+
+
+ You site CSS did not load properly. Your baseUrl setting is probably
+ bad.{' '}
+
+
+ Maybe try baseUrl ={' '}
+
+ {/* baseUrl suggestion message */}
+
+
+
+ );
+}
function App(): JSX.Element {
const [isClient, setIsClient] = useState(false);
@@ -27,6 +47,7 @@ function App(): JSX.Element {
return (
+
{renderRoutes(routes)}
diff --git a/packages/docusaurus/src/client/hideCSSLoadingWarning.css b/packages/docusaurus/src/client/hideCSSLoadingWarning.css
new file mode 100644
index 0000000000000..fbd3c51fa0f09
--- /dev/null
+++ b/packages/docusaurus/src/client/hideCSSLoadingWarning.css
@@ -0,0 +1,3 @@
+.css-loading-warning {
+ display: none;
+ }
\ No newline at end of file
diff --git a/packages/docusaurus/src/client/templates/ssr.html.template.js b/packages/docusaurus/src/client/templates/ssr.html.template.js
index 0915f8ac2a960..402e9182447a6 100644
--- a/packages/docusaurus/src/client/templates/ssr.html.template.js
+++ b/packages/docusaurus/src/client/templates/ssr.html.template.js
@@ -35,6 +35,10 @@ module.exports = `
<% }); %>
<%~ it.postBodyTags %>
+