本地主机CSS加载失败（"Failed to Load Resource"）求助

我参考了论坛上的一些解决方案，但均无效。

HTML引用样式表代码 #

<link rel="stylesheet" href="/styles/main.css">

Express服务端代码（index.js） #

const express = require('express'); 
const app = express();              
const port = 3000;

app.get('/', (req, res) => {        
    res.sendFile('index.html', {root: __dirname});                                                      
});

app.listen(port, () => {            
    console.log(`Now listening on port ${port}`); 
});

文件夹结构 #

• 项目根目录
  • index.js
  • index.html
  • styles/
    • main.css

解决方法 #

你的Express服务没有配置静态文件服务，导致服务器无法响应/styles/main.css这类静态资源请求，所以样式加载失败。

在index.js中添加静态资源配置即可，有两种方式：

方式1：仅为styles目录配置静态服务 #

在app.get('/', ...)之前添加：

app.use('/styles', express.static(__dirname + '/styles'));

方式2：将根目录设为静态资源目录 #

如果项目里还有其他静态资源（比如图片、前端JS），可以直接把根目录设为静态目录：

app.use(express.static(__dirname));

修改后的完整index.js示例：

const express = require('express'); 
const app = express();              
const port = 3000;

// 配置静态资源服务
app.use('/styles', express.static(__dirname + '/styles'));

app.get('/', (req, res) => {        
    res.sendFile('index.html', {root: __dirname});                                                      
});

app.listen(port, () => {            
    console.log(`Now listening on port ${port}`); 
});

配置完成后重启服务，浏览器就能正常加载styles/main.css了。

内容的提问来源于stack exchange，提问作者alvivanco