Create-react-app: Losing Bootstrap styling in production build

[timothydowd]

Describe the bug

When running npm run build and deploying my react project to netlify, the netlify version of my website loses some of the bootstrap styling... here is an image of my localhosted version:
http://i.imgur.com/gZoqkY1.png

and here is the link for the netlify version:
https://ncnews-timdowd.netlify.com/

I have ensured to add the relevant stylesheet link in the index.html and added the relevant import into index.js as instructed in the react-bootstrap, bootstrap and CRA documentation, not really sure what is going wrong. I have found that if I remove the line:

import 'bootstrap/dist/css/bootstrap.css'

from my index.js and run locally I get the exact same problem in my local version as I have in my netlify version, so its definitely something to do with that bootstrap stylesheet not making it to deployment...

To Reproduce

Steps to reproduce the behavior:

1. Go to https://github.com/timothydowd/FE-NC-News
2. Click on 'clone repo'
3. In bash run:
   git clone https://github.com/timothydowd/FE-NC-News.git
4. Then cd into the repo:
   cd FE2-NC-News/front-end-nc-news/
5. Install dependencies
   npm install

6. Run the "start" script to start the application running locally
   npm start

   Your browser should now be running the front end on a localhost
   To stop running the server use ctrl + c

To make your own build..

1. Npm run build
2. Log into netlify and drag and drop build folder into netlify's 'sites' tab, this will deploy the site for you.

Environment

• Operating System: ubuntu
• Browser, Version: Chrome 74.0.3729.131
• React-Bootstrap Version: 1.0.0-beta.8

[sudkumar]

@timothydowd

What is happening

I just tested your application. Bootstrap looks fine. The problem is with your card-** and card** styles priority.

In your case, what is happening is that, in the development, the styles have following priority:

.cardHeader { /* styles for cardHeader */ }
.card-header { /* styles for card-header */ }

Because they both have same level on selection, the bellow one wins. While in production mode

.card-header { /* styles for card-header */ }
.cardHeader { /* styles for cardHeader */ }

So the .cardHeader wins and you get a really big margin around your header.

Why is this happening

In the development mode, react-create-app has different setup for styles loading then in production to make the developer experience better while developing your app. In development, styles are only fetch when you make a request for them. There are other issue which are creating this behaviour.

1. You are importing App.css in many files. You only have to import it once.
2. You are including bootstrap in 3 places
   
   
   
   • in index.html
   
   
   • in index.js
   
   
   • in Nav.jsx
   
   

Solution

First, remove all the import for App.css other then from App.jsx. Include bootstrap once (preferably in index.js) BEFORE all your local styles and you will get your development and production build matching.

Why BEFORE ? That's because, all your vendor css (node_modules) stuff is bundled in a separate css file then your application styles in the production build (npm run build). So if we don't put the vendor css before all of our styles, we may get different UI in development and in production. Because, in the development environment, CRA preserves the order of styles while loading (in this case, application styles first and vendor styles later) but in production, the vendor styles loaded first and application styles later. For example

/* App.css */
body { background: orangered; }

/* Bootstrap.css */
body { background: silver; }

// Loading the application styles before vendor styles
import "./App.css"
import "bootstrap/bootstrap.css"

In development, body element will have background of silver (CRA preserves the order) while in production, body will have a background of orangered (vendor gets least priority).

I hope this helps.

[timothydowd]

@sudkumar

Thank you very much for your in depth response it is very much appreciated.

I have followed your steps and made the amendments and pushed them to my 'fix-netlify' branch. After re building and deploying to netlify I unfortunately still get the same result... Did you try deployment on your side to get it work?

Your time is very much appreciated.

[sudkumar]

@timothydowd

I tested it by building it locally (npm run build) and testing with a local running server. Basically, your netlify result is the final result for your applications styles https://ncnews-timdowd.netlify.com/. We resolved the issues that styles were different on development from production.

if you want your results to match http://i.imgur.com/gZoqkY1.png, you will need to update your App.css file. Basically you will need to remove cardHeader and cardTitle styles from App.css styles.

[timothydowd]

@sudkumar

Thank you very much, you solved my problem!