在Next.js中使用reactstrap遇CSS加载错误求解决方案

Hey there! Let's fix that Bootstrap CSS loader error in your Next.js + reactstrap project. I've been through this exact issue before, so here's how to get it sorted step by step:

1. First, confirm your Next.js routing mode #

Next.js has two main routing systems, and the fix varies slightly between them:

If you're using the Pages Router (Next.js 13 or earlier, or 13+ with a pages directory) #

The key here is to load Bootstrap's global CSS in your root _app.js/_app.tsx file—this is Next.js's designated spot for global styles, and it handles the CSS loading automatically without extra config.

• Open pages/_app.js (or _app.tsx if using TypeScript)
• Add the Bootstrap CSS import at the very top:

import 'bootstrap/dist/css/bootstrap.min.css';

• Make sure your root app component is set up correctly, like this:

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

export default MyApp;

If you're using the App Router (Next.js 13+ with an app directory) #

App Router uses a different pattern for global styles—you'll need to import Bootstrap CSS into your globals.css file or root layout:

1. Open app/globals.css and add this line at the top:

@import 'bootstrap/dist/css/bootstrap.min.css';

2. Ensure your root layout.js/layout.tsx imports globals.css:

import './globals.css';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Alternatively, you can import Bootstrap directly in the root layout file, but using globals.css is the more standard approach for global styles in App Router.

2. Double-check your dependencies #

Make sure you've installed both reactstrap and Bootstrap first—sometimes missing packages can cause weird errors:

npm install reactstrap bootstrap

Why did the original error happen? #

You were probably trying to import Bootstrap's global CSS directly in a page or component file. Next.js restricts global CSS imports to specific root files (_app.js for Pages Router, globals.css/root layout for App Router) to avoid style conflicts. When you import global CSS elsewhere, it doesn't use the built-in CSS loader, hence the "Unexpected token" error.

Troubleshooting if it still doesn't work #

• Update Next.js to the latest version to ensure you have the most up-to-date CSS handling:

npm update next

• Delete your node_modules and lock file, then reinstall dependencies to fix any corrupted packages:

rm -rf node_modules package-lock.json
npm install

Once you do this, you should be able to use reactstrap's components without any CSS loader issues!

内容的提问来源于stack exchange，提问作者gsapienza