Flask项目中HTML链接CSS文件返回404错误如何解决？

核心原因 #

报错GET /static/css/style.css HTTP/1.1" 404说明服务端没有找到对应路径的静态资源，可按以下步骤逐一排查：

• 核对静态资源存放路径
  1. 确认项目根目录下存在完全匹配名称static的文件夹，不要出现大小写错误（如Static）、拼写错误（如statics）
  2. 确认static文件夹下存在css子文件夹，且css文件夹内存放了名为style.css的文件，所有文件夹、文件名的大小写要完全匹配，Flask静态资源路由对大小写敏感
• 核对Flask实例配置
  如果你初始化Flask实例时主动指定了static_folder参数，需要确保参数值和实际静态文件夹名称一致，默认配置无需额外指定参数：

  # 默认正确配置
  app = Flask(__name__)
  
  # 若自定义静态文件夹需对应配置
  # app = Flask(__name__, static_folder="自定义静态文件夹名称")
  

• 核对模板文件配置
  存放引入CSS的HTML文件必须放在项目根目录下的templates文件夹内，才能正确解析{{ url_for() }}模板语法，直接打开本地HTML文件会导致语法无法解析、路径生成错误
• 手动验证资源可访问性
  直接在浏览器地址栏输入http://127.0.0.1:5000/static/css/style.css，如果仍无法访问，说明文件路径确实不匹配，重新核对文件存放位置即可
• 缓存清理测试
  按Ctrl+F5硬刷新页面，或清理浏览器缓存后重新加载，排除本地缓存导致的加载异常

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