在服务器上找不到 CSS 样式表？答案

【问题标题】：CSS stylesheet not found on server?在服务器上找不到 CSS 样式表？
【发布时间】：2017-03-04 02:31:34
【问题描述】：

我正在使用 react/webpack 在本地 8080 上运行开发服务器。这是我还不太了解的东西，我之前遇到过这个问题。 Bootstrap 在 HTML 中被链接并且运行良好。但是，当我链接样式表时，控制台给我一个错误 404 not found for my stylesheet。

这是我的 HTML 样板：

<!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="public/stylesheet.css" />
</head>
<body>
  <div id="root">

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

Index.html 和 Index.js 在根目录，/Public 目录也是如此，它只包含一个文件：stylesheet.css。

为什么当我运行本地服务器时 stylesheet.css 没有加载到浏览器中，我该如何解决这个问题？谢谢。

【问题讨论】：

你试过Public/stylesheet.css 吗？（大写 P）- 一些服务器（查看 IIS）区分大小写
谢谢！正如您在上面的示例中看到的那样，我之前尝试过 public，但是 Public 目录不在项目的 TRUE 根目录中。它在 App 目录中。我将公共目录移到了真正的根目录（使用 webpack 配置和节点模块）并且它工作了！
这样做有什么原因吗？浏览器是否只希望 Public 文件夹位于真正的根目录中？
我不确定 webpack 的内部工作原理，但浏览器并不“期待”任何东西。浏览器去寻找你告诉它找到的文件；在这种情况下：<application_root>/public/stylesheet.css 或在远程服务器的位置，例如：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css - 更新： 在这种情况下，public 定义为与html 文件处于同一级别的目录.

标签： css node.js reactjs server webpack

【解决方案1】：

如果您像这样使用 express 共享公用文件夹

app.use(express.static(path.join(__dirname, 'public')));

那么您不需要在源中包含“public”。

换句话说就是这个

&lt;link rel="stylesheet" href="public/stylesheet.css" /&gt;

应该是这样的

&lt;link rel="stylesheet" href="/stylesheet.css" /&gt;

【讨论】：