Bootstrap not loaded in NextJs

Question

I am trying to make simple NextJs Application where I included bootstrap.

Package.json:

  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "autoprefixer": "^9.8.6",
    "bootstrap": "^4.5.3",         <----------------------------
    "next": "^10.0.3",
    "next-compose-plugins": "^2.2.0",
    "next-fonts": "^1.5.1",
    "node-sass": "^5.0.0",
    "postcss": "^7.0.35",
    "postcss-easy-import": "^3.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-multi-carousel": "^2.5.5",
    "reactstrap": "^8.7.1",
    "sass": "^1.29.0",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.1"
  },

next.config.js:

const withSass = require('@zeit/next-sass');
const withCss = require('@zeit/next-css');

module.exports = withSass(withCss({
  webpack (config) {
    config.module.rules.push({
      test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
      use: {
        loader: 'url-loader',
        options: {
          limit: 100000,
          publicPath: './',
          outputPath: 'static/',
          name: '[name].[ext]'
        }
      }
    });

    return config
  },
  cssLoaderOptions: {
    url: false
  }
}));

pages/_app.tsx:

import React from "react";
import App from "next/app";

import 'bootstrap/dist/css/bootstrap.min.css';
import "react-multi-carousel/lib/styles.css";
import "../styles/styles.scss";

export default class ClnUi extends App {
  render() {
    const { Component, pageProps } = this.props;
    return <Component {...pageProps} />;
  }
}

pages/index.tsx:

    const Home = () => (
       <div class="container">
         This is a container div..
       </div>
    )

   export default Home;

I have made the import in _app.tsx and used inside index.tsx but this works perfectly fine in localhost but only not in deployed vercel app. (projectname.vercel.app) ..

Could you please kindly help me in figure out what I am doing wrong with my code above that causes the bootstrap css not loading in production environment alone?

But this css import import "../styles/styles.scss"; has been working fine in both environments.

Huge thanks in advance.

Answer 1

add this import statement on top of your _app.js file or in next 13 in top of your layout.js file

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

worked for me.