Bootstrap styling disappears in production build of create-react-app

Question

I've made a react app using the create-react-app. When I tested it through localhost, all my css and bootstrap were working as intended. However, when I deployed the react app, the bootstrap stylings are suddenly not working (but the css from the App.css still works).

I've tried reordering the importing statements and taking out all unnecessary css, but nothing has worked.

Any advice would be greatly appreciated!

Here are the import statements:

App.js (code to include Routes/Home page elements)

import React, { Component } from 'react';
import Home from './home.js'
import { HashRouter, Route, Link } from "react-router-dom";
import './App.css';

Home.js (code for the home page):

import React from 'react';
import ReactDOM from 'react-dom';

index.js:

import { HashRouter } from 'react-router-dom';
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.min.css';

import App from './App.js'
import './App.css';

ReactDOM.render((
  <HashRouter>
    <App />
  </HashRouter>
  ), document.getElementById('root')
);

Ross Moody Ross Moody · Accepted Answer · 2021-06-07T01:15:28

My hunch is that your import statement for your bootstrap styles isn't using a relative path. I'm unsure how you are bundling this application but might try giving it a direct path:

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

Bootstrap styling disappears in production build of create-react-app

1 Answers