How do I implement the Sass features of Bootstrap 5 with NextJS?

Question

I am working on a NextJS project, and I already have experience using Sass with NextJS. Now I am trying to build a NextJS project with Bootstrap 5. I am able to add the basic Bootstrap functionality of accessing styles via classNames. However, I am having trouble whenever I try to use any of the Sass features that come with Bootstrap. Essentially, it looks like NextJS doesn't recognize that Sass is part of Bootstrap, so whenever I use a Sass feature, it tells me that I need to install Sass.

Here are a few samples of my file:

_app.js

import { useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.css';
import '../styles/globals.scss';
import Layout from '../components/layout/Layout';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    import('bootstrap/dist/js/bootstrap');
  }, []);

  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;

Row.jsx

const Row = ({ id, title, size, color }) => {
  return (
    <tr className='table-dark border'>
      <td className='table-dark border'>{id}</td>
      <td className='table-warning border'>{title}</td>
      <td className='table-dark border'>{size}</td>
      <td className='table-danger border'>{color}</td>
    </tr>
  );
};

export default Row;

global.scss

@import 'bootstrap/scss/functions'; // Required
@import 'bootstrap/scss/variables'; // Required
@import 'bootstrap/scss/mixins'; // Required

@import 'bootstrap/scss/root'; // Required
@import 'bootstrap/scss/reboot'; // Required

@include media-breakpoint-up(md) {
  body {
    background-color: pink;
    color: yellow !important;
  }
}

All the styles in Row.jsx do work as expected. However, when I try to use a Bootstrap/Sass mixin, such as media-breakpoint-up , I receive the following error:

Failed to compile

./styles/globals.scss
To use Next.js' built-in Sass support, you first need to install `sass`.
Run `npm i sass` or `yarn add sass` inside your workspace.

Learn more: https://nextjs.org/docs/messages/install-sass

Do I just need to redundantly install Sass separately, so that NextJS allows the Sass features in Bootstrap to work? Or is there some configuration that I can change to solve this issue?

Answer 1

If after running npm i sass and you're still getting the same error.

Try this

First, I thing you're running next dev or next directly from the command line. Kindly add "dev": "next dev" to your scripts in package.json.

Then run npm run dev