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

【问题标题】：React App On Heroku - CSS Styling Not Taking Effect On Mobile DevicesHeroku 上的 React 应用程序 - CSS 样式在移动设备上不起作用
【发布时间】：2019-11-28 00:34:24
【问题描述】：

问题

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

还有我的文件夹结构：

我参考过的资源：

【问题讨论】：

您能否举例说明如何将样式导入应用程序。您提到了“但是当我在移动设备上查看该网站时，我看到了”并包含了图像。它实际上应该是什么样子。也包括该图像。
@Muljayan 更新
所以您的问题是，当您在 heroku 上托管时，O、omega 和 theta 图标不会出现在移动设备上，是吗？
@Muljayan 这很正常，是字体乱了。以及滚动行为。滚动在移动设备和桌面设备上具有“粘性”。

标签： css node.js reactjs typescript heroku

【解决方案1】：

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

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

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

【讨论】：