只有当我将它导入 index.js 时，Bootstrap 缩小的 css 才会加载答案

【问题标题】：Bootstrap minified css only loads if I import it in index.js只有当我将它导入 index.js 时，Bootstrap 缩小的 css 才会加载
【发布时间】：2019-06-23 16:19:10
【问题描述】：

所以，到目前为止，我一直在使用 BootstrapCDN 加载程序，但我只想下载文件并在本地使用它们，而不依赖我的互联网连接，但样式不会加载。顺便说一下，我只需要网格。

我正在使用带有材质 ui 和引导程序网格的 reactjs -> project structure

我更改了样式表链接和脚本以指向我的文件，并相应地更改了 jQuery 和 Popper.js 标记。

CSS

来自

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"...>

到

<link rel="stylesheet" href="../src/bootstrap/sources/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"

现在：

<script src="../src/bootstrap/sources/js/bootstrap.min.js"></script>

同样的事情

<script src="../src/bootstrap/jquery-3.2.1.slim.min.js"></script> <script src="../src/bootstrap/popper.min.js"></script>

而指向bootstrap.min.css 的链接位于<header> 中，而所有其他链接位于<body> 标记中。

网格不起作用，一切都搞砸了。但是，如果我在我的 /src/index.js 文件中包含一个 import './bootstrap/sources/css/bootstrap.min.css'; - 我有到某些页面的私有路由的文件 - 网格实际上可以工作。

如果我将它从 BootstrapCDN 改回现金引导程序的 css 并像以前一样指定链接，我不必包含该导入并且网格可以完美运行。

我是不是做错了什么？

编辑：chrome 显示 css 文件和所有使用 code 304 加载的 js 文件 - 未在网络选项卡中修改

【问题讨论】：

你能告诉我们你项目中的文件夹结构吗？
Ofc，抱歉 - 我添加了截图

标签： html css reactjs bootstrap-4

【解决方案1】：

首先：在您的 JS 文件中保留 CSS 导入并没有错……有什么问题？这是 React 中的常用方法。

关于您的具体问题：您指的是不存在的文件，例如 ../src/bootstrap/jquery-3.2.1.slim.min.js。这是因为此路径在您的源代码中有效，但在最终包中无效。

例如，如果您使用create-react-app，则应将资源（bootstrap 文件夹）放在public 文件夹中，因此使用的 URL 应类似于 "/bootstrap/jquery-3.2.1.slim.min.js"。更好的是：使用%PUBLIC_URL% 变量。

见https://facebook.github.io/create-react-app/docs/using-the-public-folder

【讨论】：

如果我将路径添加到index.html，我认为引导程序会正确导入 - 除非我导入错误。直到。非常感谢！