React应用需要花费几秒钟的时间来加载字体和引导程序（reactstrap）

Question

我正在学习反应，我想知道为什么我的字体和自举程序资源一开始要花一些时间来加载。我正在使用带有CSS而不是CSS的react create app。 我想知道这是否可以处理我打电话给我资产的方式。

我的index.js称为RootContainer，看起来像这样

import React from "react"
import ReactDOM from 'react-dom';
import { Provider } from "react-redux"
import store from "./redux/setupStore"
import App from "./App"
import './assets/styles/main.scss';
import * as serviceWorker from './helpers/serviceWorker';

class RootContainer extends React.Component {
 render() {
  return (
   <Provider store={store}>
    <App />
   </Provider>
  )
 }
}
export default RootContainer
ReactDOM.render(<RootContainer />, document.getElementById('root'));
serviceWorker.unregister();

这是我的main.scss资产文件

@import "./base/globals.scss";
@import "~bootstrap/scss/bootstrap";

在我的 globals.scss 上，我有自定义的引导程序替代项，例如 index.html 上作为嵌入式Google字体的字体

$font-family-sans-serif: 'Press Start 2P', cursive;

根据重新捕获文档，您需要在索引js上导入bootstrap的缩小文件，但是在我的用例中，我需要覆盖一些变量，甚至尝试不能解决我的问题

这是初始页面加载

这是最终页面加载

如您所见，我认为这不是正确的行为，而我在导入时做错了什么？