为什么我使用create-react-app在生产版本中丢失Bootstrap样式？

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 当运行npm run build并将我的react项目部署到netlify时，我网站的netlify版本丢失了一些引导样式...这是我本地主机版本的图像： http ： //i.imgur.com/gZoqkY1.png

and here is the link for the netlify version: https://ncnews-timdowd.netlify.com/ 这是netlify版本的链接： 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. 我确保在index.html中添加相关的样式表链接，并按照react-bootstrap，bootstrap和CRA文档中的指示将相关导入添加到index.js中，并不确定出现了什么问题。 I have found that if I remove the line: 我发现如果删除该行：

import 'bootstrap/dist/css/bootstrap.css' 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... 从我的index.js和本地运行我在我的本地版本中遇到与我的netlify版本完全相同的问题，因此它肯定与引导程序样式表有关，而不是部署...

If you want to check out my github repo: https://github.com/timothydowd/FE-NC-News 如果你想看看我的github回购： https ： //github.com/timothydowd/FE-NC-News

package.json showing bootstrap and react-bootstrap version: package.json显示bootstrap和react-bootstrap版本：

{
  "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: 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: 在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 我在开发服务器中看到了预期的结果： http ： //i.imgur.com/gZoqkY1.png

Actual result can be seen in my deployed build with styling missing: https://ncnews-timdowd.netlify.com/ 实际结果可以在我部署的版本中看到，缺少样式： https ： //ncnews-timdowd.netlify.com/

Answer 1

The problem was the order in which cra builds the css compared to how it compiles css in dev environment. 问题是，与在恶意环境中编译css的方式相比，cra构建css的顺序。 Fixed the issue by amending the app.css file and removing some unnecessary css. 通过修改app.css文件并删除一些不必要的CSS来解决了这个问题。

为什么我使用create-react-app在生产版本中丢失Bootstrap样式？

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-05-25 14:53:34

为什么我使用create-react-app在生产版本中丢失Bootstrap样式？

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-05-25 14:53:34

解决方案1
0 已采纳 2019-05-25 14:53:34