为啥我在使用 create-react-app 的生产构建中丢失了 Bootstrap 样式？

Posted

技术标签:

【中文标题】为啥我在使用 create-react-app 的生产构建中丢失了 Bootstrap 样式？【英文标题】：Why am I losing Bootstrap styling in production build using create-react-app?为什么我在使用 create-react-app 的生产构建中丢失了 Bootstrap 样式？ 【发布时间】：2019-10-11 12:12:13 【问题描述】：

当运行 npm run build 并将我的 react 项目部署到 netlify 时，我的网站的 netlify 版本失去了一些引导样式......这是我本地化版本的图像： http://i.imgur.com/gZoqkY1.png

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

我已确保在 index.html 中添加相关样式表链接，并按照 react-bootstrap、bootstrap 和 CRA 文档中的说明将相关导入添加到 index.js 中，但不确定出了什么问题。我发现如果我删除该行：

导入'bootstrap/dist/css/bootstrap.css'

从我的 index.js 并在本地运行，我在本地版本中遇到的问题与我在 netlify 版本中遇到的问题完全相同，因此它肯定与引导样式表无法部署有关...

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

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：

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'));

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>

如前所述..

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

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

【问题讨论】：

【参考方案1】：

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

【讨论】：

请问您是如何修改 app.css 文件的？我现在面临同样的问题 有一些草率的 css 在本地运行时不起作用，但是在 CRA 构建后生效（由于重新排序）。所以解决方案是确保你所有的 css 都是正确的，删除​​任何你不需要的东西。

以上是关于为啥我在使用 create-react-app 的生产构建中丢失了 Bootstrap 样式？的主要内容，如果未能解决你的问题，请参考以下文章

为啥 create-react-app 找不到我的 Sass 变量

为啥 create-react-app 会同时创建 App.js 和 index.js？

使用 create-react-app 将 react-router-dom 添加到 react 应用程序时，为啥玩笑测试会中断

为啥 npm uninstall -g create-react-app 失败？

为啥我无法在我的系统中安装 React 和卸载 create-react-app？

为啥使用“npx create-react-app”命令创建项目时，除了“node_modules”和“package.json”之外没有任何文件和文件夹？