Node.js静态服务中CSS已加载但修改不生效问题求助

问题背景 #

我在Windows Server 2012上运行server.js，从public子目录提供静态HTML、CSS和JS文件。原本所有资源都正常工作，但修改CSS（比如给#body设置background-color: red;）后页面完全没变化。已经试过Ctrl+F5强制刷新、重启Node服务器，项目完成80%，急需解决这个问题。

页面HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Timecard</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="body">
        <nav class="navbar">
            <a href="http://ip placeholder/">
                <img src="./company.png" alt="Company Logo" class="logo">
            </a>
        
            <div id="date"></div>
            <div class="links">
                <a href="/timecard-manager">Time Card Manager</a>
            </div>
        </nav>
        <div id="maincontent1">
            <div id="alphabetLinks"></div>
        </div>
        <div class="grid-container">
            <div class="row">
                <div class="grid-item" style="font-weight: bolder; font-size: large; text-align: center;">EMPLOYEE</div>
                <div class="grid-item" style="font-weight: bolder; font-size: large; text-align: center;">TODAY'S ATTENDANCE</div>
                <div class="grid-item" style="font-weight: bolder; font-size: large; text-align: center;">SUMMARY</div>
            </div>
            <div class="row">
                <div class="grid-item" id="employeeList">Employees will be listed here... </div>
                <div class="grid-item">Item 5 with text.</div>
                <div class="grid-item">Item 6 with a lot of text to see how it expands.</div>
            </div>
        </div>
        <br></br>
        <div id="maincontent3">
            <table>
                <tr id="tr3">
                    <td colspan="3">
                        <label id="clocktext" for="employee">Clock:</label>
                        <select name="employee" id="employee">
                          <option value="In">In</option>
                          <option value="Out">Out</option>
                          <option value="Personal">Personal</option>
                          <option value="Lunch in">Lunch in</option>
                          <option value="Lunch out">Lunch out</option>
                        </select>   
                        <br>
                        <label for="memo">Memo:</label>
                        <input id="memo" placeholder="Memo"><br>
                        <label for="password">Password:</label>
                        <input type="password" id="password" placeholder="Password">
                        <button class="btn btn-primary" id="button">ENTER</button>
                    </td>
                </tr>
            </table>
        </div>
        </div>
        <script src="app.js"></script>
        <br>
        <p>new content added here</p>
    </body>
</html>

排查与解决步骤 #

• 验证CSS文件的实际内容
  直接在浏览器地址栏输入http://你的服务器IP/styles.css，查看显示的代码是否是修改后的版本。如果不是，检查：

  • 本地修改的CSS文件是否已经同步到Server 2012的public目录下
  • 服务器是否有权限读取最新的CSS文件（Server 2012的文件权限可能限制了修改）

• 禁用浏览器缓存测试
  打开浏览器开发者工具（F12），切换到「网络」标签，勾选「禁用缓存」选项，然后刷新页面。此时浏览器会强制请求最新的CSS文件，若页面样式更新，说明是浏览器缓存问题。

• 检查CSS选择器与优先级
  在开发者工具的「元素」标签中选中<div id="body">，查看「样式」面板：

  • 确认#body的background-color是否被划掉（表示被更高优先级的样式覆盖，比如原生<body>标签的样式，或者其他带!important的规则）
  • 可临时在CSS中添加!important测试：#body { background-color: red !important; }，若生效则需要调整样式优先级

• 检查Node服务器的静态资源配置
  查看server.js中静态资源服务的代码，比如使用Express框架的话，是否设置了缓存参数：

  // 若存在类似缓存配置，会导致服务器返回旧文件
  app.use(express.static('public', { maxAge: '86400000' }))
  

  移除或缩短maxAge的值，重启服务器后再测试。

• 确认服务器文件系统的问题
  Server 2012可能存在文件系统缓存，可尝试在服务器上手动打开public/styles.css，确认内容是修改后的版本；若不是，重新上传或修改文件。

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