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 或其他库未正确加载，如果其中任何一个被阻止或忽略，它可能会显示在开发人员工具的控制台上，这就是我要做的.

Answer 2

这可能是竞争条件。我遇到一个问题，在生产中，setState 被调用两次，并且不知何故它并行运行。渲染的结果一半是第一状态，另一半是第二状态。

我不记得我是怎么解决的。不过，您尝试检查 setState 是否繁忙。

Answer 3

我也遇到了同样的问题，这是我发现的：

• 许多生产构建系统并行工作
• 因此，根据环境的不同，捆绑的 CSS 顺序可能会有所不同
• CSS 选择器的权重
  • 如果元素有 2 个 css 类，那么先使用哪一个并不重要，即。 e.

    <... class="classA classB">

    ===

    <... class="classB classA">

    ，在这种情况下重要的是类的定义顺序，由于并行构建过程可以交换......

---

解决方案：

仔细检查不一致的 DOM 元素的样式，并注意其中层叠样式顺序的差异。其中之一会覆盖您预期的值 - 由于较早的定义。

为了更轻松地找到差异，我使用“计算”样式选项卡（在开发人员 Web 工具中），选择“显示全部”并使用一些差异工具。当你找到被覆盖的值时，简单的!important通常就能解决问题。