css - Heroku 上的 React 应用程序 - CSS 样式在移动设备上不起作用

问题描述

问题

我有一个部署到 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')
);

我的文件夹结构：

我参考过的资源：

标签： cssnode.jsreactjstypescriptheroku

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

不确定它是如何在本地加载的……可能是因为我的笔记本电脑上有字体？不确定，但这使它起作用。

这与未加载或未提供 CSS 无关。

css - Heroku 上的 React 应用程序 - CSS 样式在移动设备上不起作用

问题描述

解决方案

推荐阅读