CSS 和 JS 不再在我的 Flask 應用程序上工作

Question

不久前，我使用 CSS 和 JS 為我正在使用 Flask 制作的應用程序制作了一個導航欄，並且過去一切正常。 然而，幾周前，我在 localhost 上運行了該應用程序，發現導航欄不再應有的顯示。 我不知道是什么突然導致了這個問題，因為我沒有對以前有效的 CSS、JS 或 HTML 進行任何更改（我記得）。

我已經使用了 CTRL-SHIFT-R 和 CTRL-F5 等方法來重新加載頁面並避免緩存問題，但它們似乎並沒有真正起作用。 當我在使用 CTRL-F5 或 CTRL-SHIFT-R 刷新頁面后查看網絡選項卡時，它告訴我它正在加載所有必要的文件，據我所知，但它並沒有反映在實際頁面上導航欄仍然壞了。 當我在瀏覽器中輸入 CSS 或 JS 文件路徑時，它會正確轉到文件。 同樣，我確信這些文件沒有任何問題，因為它們曾經可以工作。

這就是我的導航欄 HTML 的樣子：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
      crossorigin="anonymous">
    <style>main {padding-top: 70px;}</style>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}">
</head>
<body>
    <header id="navbar">
        <nav class="navbar-container container">
            <a href="{{ url_for('main.index') }}" class="home-link">
                APP NAME
            </a>
            <button type="button" class="navbar-toggle" aria-label="Open navigation menu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-menu">
                <ul class="navbar-links">
                    <li class="navbar-item">
                        <a class="navbar-link" href="{{ url_for('auth.login') }}">Log in/Register</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <script src="{{ url_for('static', filename='js/navbar.js') }}"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>
</body>
</html>

基礎 HTML：

<body>
{% block navbar %}
    {% include 'navbar.html' %}
{% endblock %}

{% block content %}{% endblock %}
</body>
</html>

部分索引頁：

{% extends 'base.html' %}

{% block content %}
<header class="masthead">
    <div class="container d-flex h-100 align-items-center">
        <div class="mx-auto text-center">
            <h1 class="mx-auto my-0 text-uppercase">APP NAME</h1>
            <h2 class="mx-auto mt-2 mb-5">TEXT</h2>
            <a class="btn-lg btn-danger" href="{{ url_for('auth.register') }}">Register for free!</a>
        </div>
    </div>
</header>

以下是相關文件的粘貼：

https://pastebin.com/gRmGKAQE - 我的導航欄的 HTML

https://pastebin.com/sVBuZrcG - 索引頁 HTML

https://pastebin.com/PwYVZPed - 我的 styles.css 文件

https://pastebin.com/BQNHcRhi - 我的 navbar.js 文件

我希望這足夠全面。

再次，我三重檢查了所有文件路徑是否正確，並且我的網絡選項卡向我保證了以下內容的“200”狀態代碼：

styles.css
導航欄.js
bootstrap.min.css
jquery-3.2.1.slim.min.js
popper.min.js
bootstrap.min.js

非常感謝您對此問題的任何建議和解決方案。

Answer 1

幾個月前，同樣的事情發生在我身上。

我找到的解決方案是我最終使用了 flask_bootstrap 而不是直接引用引導樣式表，這解決了我的問題。 我強烈建議檢查一下。

https://pythonhosted.org/Flask-Bootstrap/basic-usage.html#sample-application

CSS 和 JS 不再在我的 Flask 應用程序上工作

問題描述

1 個解決方案

解決方案1
0 已采納 2021-04-02 16:13:40

CSS 和 JS 不再在我的 Flask 應用程序上工作

問題描述

1 個解決方案

解決方案1 0 已采納 2021-04-02 16:13:40

解決方案1
0 已采納 2021-04-02 16:13:40