React：生产构建看起来与开发构建不同

Question

我有一个 React/Django 应用程序，它在为生产而构建时的行为与在开发服务器上运行时的行为不同。开发版本就是我想要的样子。

CSS 存在许多问题。文本是不同的字体，并且一些 Bootstrap/Reactstrap 功能将被忽略。请参阅下面的示例屏幕截图。

我认为这个问题与开发服务器处理 css 文件的顺序有关，而不是 Django 通过将构建脚本/build创建的目录中的文件收集到 Django 目录中来服务构建的应用程序的方式/staticfiles。然而，我很困惑这如何有选择地将类应用于同一组件。（见下文 - 大屏幕文本的偏移量不同，而列大小相同）

这是生产版本中主页的屏幕截图，由 Django 本地提供或在 Heroku 上远程提供。（npm run build或者npm run build-local- 请参阅下面的 package.json 文件）

这是它在本地开发服务器上的样子：( npm run start)

特别是，该类offset-md-5在生产版本中被忽略，而其余类则不会，col-md-5例如在两个版本中都适用。

这是相关的组件：

const Photojumbo = () => {
    return(
        <Container className="jumbo-text ">
            <Jumbotron  className="" style={{ backgroundImage: "url(/static/photosquat-cropped.jpg)", backgroundSize: 'cover' }}>

                <Col className="header header-text col-md-5 offset-md-6" >
                    <h3>ytterblog</h3>
                    <p>A blog app and portfolio project by Gabriel Ytterberg</p>
                </Col>

            </Jumbotron>
        </Container>
    )
}

这是我的 package.json 的一部分，其中包含构建脚本和依赖项。请注意，我添加了构建本地脚本来模拟部署到 Heroku 的效果，因为部署过程需要很长时间。据我所知，build-local 和 Heroku 构建版本是相同的。

  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.0",
    "bootstrap": "^4.5.3",
    "bootstrap-social": "^5.1.1",
    "express": "^4.17.1",
    "font-awesome": "^4.7.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-fontawesome": "^1.7.1",
    "react-redux": "^7.2.2",
    "react-redux-form": "^1.16.14",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "react-transition-group": "^4.4.1",
    "reactstrap": "^8.7.1",
    "redux": "^4.0.5",
    "redux-logger": "^3.0.6",
    "redux-thunk": "^2.3.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "PUBLIC_URL=http://localhost:3000/ react-scripts start",
    "build": "PUBLIC_URL=https://ytterblog.herokuapp.com/ react-scripts build",
    "build-local": "PUBLIC_URL=http://localhost:8000/ react-scripts build && python manage.py collectstatic --noinput",
    "postbuild": "python manage.py collectstatic --noinput",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

这是我的 App.css，这是我使用的唯一 css 文件：

  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.jumbotron {
  position:relative;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  margin: 0 auto;
  background:  none;
  color:floralwhite;
}

.navbar-dark {
  background-color: #142f87;
}

.header{
  background-color: #1a3db0;
  margin:0px auto;
  padding: 20px 0px 20px 0px;
}

.header-text{
  color: #dbdbdb;
  text-align: center;
}

.footer{
  background-color: #1a3db0;
  margin-top: 50px;
  padding: 20px 0px 20px 0px;
  position: relative;

}

.footer-text{
  color: #dbdbdb;
  text-align: center;
}

.avatar{
  height: 100;
  width: 100;
  margin: 20px;
}

.postcard{
  margin: 50px 0px 50px 0px;
}

dl {
  display: grid;
  grid-template-columns: max-content auto;
  column-gap: 20px;
}

dt {
  grid-column-start: 1;
}

dd {
  grid-column-start: 2;
}

.card {
  padding-right: 0!important;
  padding-left: 0!important;
}

我错过了什么？！？！

Answer 1

使用浏览器上的开发人员工具查看是否有任何引导 CDN 或其他库未正确加载，如果它们中的任何一个被阻止或忽略，它可能会显示在开发人员工具的控制台上，这就是我要做的。