Why am I losing Bootstrap styling in production build using create-react-app?

Question

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...

If you want to check out my github repo: https://github.com/timothydowd/FE-NC-News

package.json showing bootstrap and react-bootstrap version:

{
  "name": "front-end-nc-news",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.17",
    "@fortawesome/free-solid-svg-icons": "^5.8.1",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "@reach/router": "^1.2.1",
    "axios": "^0.18.0",
    "bootstrap": "^4.3.1",
    "css-loader": "^2.1.1",
    "mdbreact": "^4.13.0",
    "react": "^16.8.6",
    "react-bootstrap": "^1.0.0-beta.8",
    "react-dom": "^16.8.6",
    "react-scripts": "2.1.8",
    "style-loader": "^0.23.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {}
}

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';


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

head in index.html:

<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />


    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />

    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

    <title>NC NEWS</title>
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
  </head>

As previously mentioned..

Expected result is what I see in my development server: http://i.imgur.com/gZoqkY1.png

Actual result can be seen in my deployed build with styling missing: https://ncnews-timdowd.netlify.com/

Tim Dowd Tim Dowd · Accepted Answer · 2019-05-25T14:53:34

The problem was the order in which cra builds the css compared to how it compiles css in dev environment. Fixed the issue by amending the app.css file and removing some unnecessary css.

Why am I losing Bootstrap styling in production build using create-react-app?

1 Answers