Блог

Главная - Вопросы по программированию - Внешний файл CSS не загружается

Внешний файл CSS не загружается

#python #html #css #flask

#python #HTML #css #flask

Вопрос:

Я следую руководству YouTube, но мой CSS не загружается. Я попытался изменить путь и сбросить кеш в Chrome. Я в недоумении относительно того, что я могу изменить, чтобы заставить его работать. Все остальное работает, я видел несколько других сообщений, подобных этому, но я не смог найти ответа ни на одно из тех, которые сработали для меня. Использование VS 2019, Python 3.8

app.py 

 from flask import Flask, render_template, url_for

app= Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

if __name__ == "__main__":
    app.run(debug=True)

index.html 

 {% extends 'base.html' %}
    
{% block head %}
    <h1>Templated</h1>
{% endblock %}

{% block body %}
    <body>Templates</body>
{% endblock %}

base.html 

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" herf="{{ url_for('static', filename='/css/main.css') }}" >
    {% block head %}{% endblock %}
</head>
<body>
    {% block body %}
    <link rel="stylesheet" type="text/css" herf="{{ url_for('static', filename='/css/main.css') }}">
    {% endblock %}
</body>
</html

main.css 

 body {
    color: blue;
    margin: 0;
    font-family: sans-serif;
}
h1 {
    color: red;
    margin: 0;
    font-family: sans-serif;
}

путь: C:UsersusernameOneDriveProgrammingVisual Studio 2019Flask Introductionstaticcssmain.css

Комментарии:

1. Ваш base.html имеет herf= вместо href= ссылок css.

2. @JohnGordon Отличное место. Я также собирался сказать, что аргументы имени файла, предоставленные для url_for , вероятно, не нуждаются в предшествующей косой черте: filename='css/main.css' вместо filename='/css/main.css' .

3. БОЖЕ! Спасибо! это было все

Ответ №1:

В вашем base.html и в link теге удалите первый / в path /css/main.css ( => css/main.css ) и измените на этот и проверьте, работает ли он:

   <link rel="stylesheet" type="text/css" herf="{{ url_for('static', filename='css/main.css') }}">

Вы должны использовать relative path не absolute тот.