Bootstrap缩小的CSS仅在我将其导入index.js中时加载

时间:2019-01-30 11:34:27

标签: html css reactjs bootstrap-4

因此,到目前为止,我一直在使用BootstrapCDN加载程序,但是我想下载文件并在本地使用它们,而无需依赖我的Internet连接,但是样式不会加载。我只需要网格

我正在将Reactjs与材质ui和bootstrap的网格一起使用-> 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">

JS

<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>标记中。

网格无法正常工作,一切都搞砸了。但是,如果我在import './bootstrap/sources/css/bootstrap.min.css';文件中包含一个/src/index.js,则该文件实际上可以正常工作。

如果我将其从BootstrapCDN更改回现金引导程序的CSS,并指定链接,就像以前一样,那么我就不必包含该导入内容,并且网格可以完美工作。

我做错什么了吗?

编辑:chrome显示css文件和所有的js文件正在加载代码304 -未在“网络”标签中修改

1 个答案:

答案 0 :(得分:2)

首先:将CSS导入保留在您的JS文件中没有任何问题...这有什么问题? 这是进入React的常用方法。

关于您的特定问题:您所指的是不存在的文件,例如from functools import reduce results.apply(lambda col: reduce(lambda p,q: p & q, col), axis=1) 。这是因为该路径在您的源中有效,但在最终捆绑包中无效。

例如,如果您使用的是../src/bootstrap/jquery-3.2.1.slim.min.js,则应将资源(create-react-app文件夹)放在bootstrap文件夹中,因此使用的URL应该类似于{{1 }}。 更好的是:使用public变量。

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