为什么在使用create-react-app的生产版本中会丢失Bootstrap样式？ [英] Why am I losing Bootstrap styling in production build using create-react-app?

问题描述

在运行npm run build并将我的react项目部署到netlify时，我网站的netlify版本丢失了一些自举样式...这是我的本地主机版本的图像：
http://i.imgur.com/gZoqkY1.png

，这是netlify版本的链接：
https：//ncnews-timdowd.netlify .com /

我已确保在react.html中添加相关的样式表链接，并将相关的导入项添加到index.js中-bootstrap，bootstrap和CRA文档，不确定是否出了问题。我发现如果删除以下行：

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

从我的index.js并在本地运行，我在本地版本中遇到的问题与在netlify版本中完全一样，因此，这肯定与该引导程序样式表有关，而没有使其部署...... p

如果您想查看我的github仓库：
https://github.com/timothydowd/FE-NC-News

package.json显示引导程序和react-bootstrap版本：

  {
 name： front-end-nc-news，
 version： 0.1.0，
私人：true，
依赖关系：{
 @ 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：反应脚本开始，
  build：反应脚本建立，
 test：反应脚本测试，
 eject：反应脚本弹出 
}，
  eslintConfig：{
 extends： react-app 
}，
 browserslist：[
> 0.2％，
 not死，
不是ie< = 11，
不是op_mini所有 
]，
 devDependencies：{} 
} 
  

index.js：

  import从反应中反应； 
从 react-dom导入ReactDOM； 
从 ./App导入应用； 
导入 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 =快捷方式图标 href =％PUBLIC_URL％/ favicon.ico /> 
 
 
<元
 name = viewport 
 content = width = device-width，initial-scale = 1，rinkle-to-fit = no  
 /> 
<元名称=主题颜色 content =＃000000 /> 
 
< link rel = manifest href =％PUBLIC_URL％/ manifest.json /> 
 
< title> NC新闻< / title> 
< link 
 rel = stylesheet 
 href = https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css 
完整性= sha384-ggOyR0iXCbMQv3Xipma34MD + dH / 1fQ784 / j6cY / iJTQUOhcWr7x9JvoRxT2MZw1T 
 crossorigin =匿名 
 /> 
< / head> 
  

如前所述。

期望结果就是我在开发服务器中看到的结果： http://i.imgur.com/gZoqkY1.png

可以在我部署的构建中看到实际结果，但缺少样式：
https://ncnews-timdowd.netlify.com/

解决方案

问题在于cra构建CSS的顺序与其在开发环境中编译CSS的方式相比。通过修改app.css文件并删除一些不必要的CSS来解决此问题。

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/

解决方案

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.

这篇关于为什么在使用create-react-app的生产版本中会丢失Bootstrap样式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！