React - 为什么找不到我的样式表？错误 404答案

【问题标题】：React - Why is my stylesheet not found? Error 404React - 为什么找不到我的样式表？错误 404
【发布时间】：2017-03-03 04:11:17
【问题描述】：

这是我的根 HTML 文件。如您所见，从 Bootstrap 获取样式没有问题（此功能运行良好）。当我在 localhost:8080 的浏览器中打开 index.html 时（通过 webpack 命令运行服务器），它找不到样式表！这是我不明白的事情。请帮忙。谢谢。

顺便说一句.. stylesheet.css 与 index.html 和 index.js 位于同一目录级别。为什么引导程序样式表被拾取而不是我的样式表？

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Weather App</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
  <div id="root">

  </div>
</body>
</html>

【问题讨论】：

标签： css node.js reactjs npm http-status-code-404

【解决方案1】：

Meteor 自动加载所有样式表。我已经看到建议将它们放在 /client/stylesheets 或 /imports/ui/css 文件夹中。

您无需输入 <link rel="stylesheet" href="stylesheet.css" /> 。尝试删除该行，看看您是否可以看到您的样式应用于您的页面。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 为您工作的原因是因为它是从外部地址加载的。它是硬编码在您的 html 上的，而不是由流星管理的。我不推荐它，但如果你想对你的样式表做同样的事情，你可以把它放在 /public 文件夹中，并使用<link rel="stylesheet" href="/stylesheet.css" />。但 Meteor 旨在为您管理所有样式表，所以最好不要这样做。

最后，如果你想控制样式表的导入顺序，你可以指定import '/client/stylesheet.css'; // import CSS from absolute path - 看这里清楚：https://guide.meteor.com/structure.html#intro-to-import-export

【讨论】：

放在/public文件夹有什么区别？
您的公用文件夹被视为您的根目录。其他所有东西都由流星神奇地加载和管理，但公共文件夹中的“东西”可以通过src="/something" 访问。