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/
1 answers
solution1
0 ACCPTED 2019-05-25 14: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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.