How to make bootstrap and antd working together in react?

Question

I'm currently doing a project in NextJS and I need to use bootstrap (for fullcalendar) and AntD. But the global style of bootstrap makes some weird change inside the component of AntD. I tried to make bootstrap scoped only for the component where I use fullcalendar (using a scss file with a class importing bootstrap) and it worked well for Antd but fullcalendar was not fully functional. I also tried to reference it as an id instead of class, it was better but still not functional for fullcalendar.

Here what I have tried so far:

// I also tried with .bootstrap-scope instead of #bootstrap-scope
#bootstrap-scope {
  // bootstrap import
  @import '~bootstrap/scss/bootstrap';

  //This is for the icons
  @import '../icons/font-awesome/css/fontawesome-all.css';
  @import '../icons/simple-line-icons/css/simple-line-icons.css';
  @import '../icons/weather-icons/css/weather-icons.min.css';
  @import '../icons/themify-icons/themify-icons.css';
  @import '../icons/flag-icon-css/flag-icon.min.css';
  @import '../icons/material-design-iconic-font/css/materialdesignicons.min.css';

  // Fullcalendar style
  @import '~@fullcalendar/core/main.css';
  @import '~@fullcalendar/daygrid/main.css';
  @import '~@fullcalendar/timegrid/main.css';
  @import '~@fullcalendar/timeline/main.css';
  @import '~@fullcalendar/resource-timeline/main.css';
}

and my next.config.js :

const withSass = require('@zeit/next-sass');
const withImages = require('next-images');
const withCss = require('@zeit/next-css');
const withLess = require('@zeit/next-less');
const withFonts = require('next-fonts');
const withPlugins = require('next-compose-plugins');

const lessToJS = require('less-vars-to-js');
const fs = require('fs');
const path = require('path');

const themeVariables = lessToJS(
  fs.readFileSync(path.resolve(__dirname, './theme/antd-custom.less'), 'utf8')
);

const nextConfig = {
  lessLoaderOptions: {
    javascriptEnabled: true,
    modifyVars: themeVariables,
  },
  webpack: (config, { isServer }) => {
    if (isServer) {
      const antStyles = /antd\/.*?\/style.*?/;
      const origExternals = [...config.externals];
      config.externals = [
        (context, request, callback) => {
          if (request.match(antStyles)) return callback();
          if (typeof origExternals[0] === 'function') {
            origExternals[0](context, request, callback);
          } else {
            callback();
          }
        },
        ...(typeof origExternals[0] === 'function' ? [] : origExternals),
      ];

      config.module.rules.unshift({
        test: antStyles,
        use: 'null-loader',
      });
    }
    return config;
  },
};

const plugins = [withSass, withImages, withFonts, withLess, withCss];

module.exports = withPlugins(plugins, nextConfig);

How to make them coexist ?

How to make bootstrap and antd working together in react?

0 Answers0