css - react : Production build looks different from development build

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 中包含构建脚本和依赖项的部分。请注意，我添加了 build-local 脚本来模拟它如何部署到 Heroku，因为部署过程需要很长时间。据我所知，本地构建版本和 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 或其他库未正确加载，如果其中任何一个被阻止或忽略，它可能会显示在开发人员工具的控制台上，这就是我会做的。