自定义CSS无法与Bootstrap关联，EJS项目样式不生效求助

以下是几种常见的排查和解决方法：

• 检查样式优先级
  Bootstrap的样式规则优先级可能高于你的自定义样式。可以通过以下方式提升自定义样式的优先级：

  • 使用更具体的CSS选择器，比如把.my-img改成section .container .my-img，确保选择器权重超过Bootstrap的对应规则。
  • 必要时可以使用!important（尽量避免滥用，仅用于紧急情况），例如：

    .my-img {
      width: 200px !important;
    }
    

• 验证CSS文件是否成功加载
  打开浏览器开发者工具（F12），切换到「网络」标签，刷新页面后查看app.css的请求状态：

  • 如果显示404错误，说明路径引用错误。EJS模板渲染后的页面路径可能和你预期的相对路径不符，建议改用绝对路径，比如把../app.css改成/app.css（假设app.css在项目根目录的静态资源文件夹中）。

• 清除浏览器缓存
  浏览器可能缓存了旧版的CSS文件，导致新样式不生效。可以：

  • 按Ctrl+F5（Windows）或Cmd+Shift+R（Mac）强制刷新页面。
  • 在link标签中添加版本参数，强制浏览器加载最新文件：

    <link rel="stylesheet" href="../app.css?v=20240520">
    

• 检查自定义CSS的语法错误
  查看app.css中是否存在语法错误（比如未闭合的大括号、拼写错误的属性名），语法错误会导致整个样式表或部分规则失效。可以使用在线CSS校验工具检查。

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