Question

问题

我有一个部署到Heroku的React应用，该应用使用create-react-app在后台进行所有捆绑。

我正在使用以Typescript编写的Node.js后端，运行节点版本10.15.3

当我在开发中本地服务我的站点时，一切都会很好。我运行npm start，该网站可以正常运行，并且看起来像这样：

该网站在登台和制作上看起来也一样。

但是当我在移动设备上浏览该网站时，会看到：

我已经获得Heroku的支持，他们告诉我他们不知道发生了什么。

似乎所有使用Ruby的人都可以解决此在线问题，而且我还没有看到使用React的一个人遇到这个问题。

所有正确的文件都存在于构建文件夹中。

另外，这是我的index.js：

import LoadingIndicator from './components/elements/LoadingIndicator';
import { PersistGate } from 'redux-persist/integration/react';
import { persistStore, persistReducer } from 'redux-persist';
import { BrowserRouter as Router } from "react-router-dom";
import { StripeProvider } from 'react-stripe-elements';
import storage from 'redux-persist/lib/storage';
import * as Environment from './Environment';
import App from './components/App';
import ReactDOM from 'react-dom';
import React from 'react';
import './index.css';

import { Provider } from 'react-redux';
import middleware from './middleware';
import rootReducer from './reducers';
import { createStore } from 'redux';

const persistConfig = {
  key: 'app',
  storage
}

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer, middleware);
const persistor = persistStore(store);

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={<LoadingIndicator />} persistor={persistor}>
      <StripeProvider apiKey={Environment.get("STRIPE_PUBLIC_KEY")}>
        <Router>
          <App />
        </Router>
      </StripeProvider>
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);

我的文件夹结构：

我引用的资源：

Answer 1

我忘记在<link href="https://fonts.googleapis.com/css?family=Poppins&display=swap" rel="stylesheet">文件的<head>部分中添加index.html。

不知道它如何在本地加载...可能是因为笔记本电脑上有字体？不确定，但是可以正常工作。

与CSS不能加载或提供服务无关。

Heroku上的React App-CSS样式在移动设备上不起作用

1 个答案: