Maison > interface Web > tutoriel CSS > Comment lier correctement les fichiers CSS externes dans mon application Flask ?

Comment lier correctement les fichiers CSS externes dans mon application Flask ?

Barbara Streisand
Libérer: 2024-11-30 18:45:16
original
400 Les gens l'ont consulté

How Do I Properly Link External CSS Files in My Flask Application?

Comment incorporer des fichiers CSS dans les applications Flask

Lorsque vous stylisez des modèles dans des applications Flask à l'aide de feuilles de style externes, il est crucial de comprendre le fichier approprié structure. Dans ce contexte, le message d'erreur fourni indique un problème avec l'application qui ne récupère pas le fichier CSS.

La structure du répertoire doit organiser les fichiers comme suit :

/app
    - app_runner.py
    /services
        - app.py 
    /templates
        - mainpage.html
    /static
        /styles
            - mainpage.css
Copier après la connexion

Assurez-vous que le répertoire /styles réside dans /static.

Pour spécifier la feuille de style dans le modèle, utilisez la syntaxe suivante :

<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/mainpage.css') }}">
Copier après la connexion

Ce chemin dirige Flask pour rechercher le fichier CSS dans l'emplacement "static/styles/mainpage.css".

En adhérant à cette structure de fichier et à cette syntaxe de modèle, vous pouvez réussir à lier des fichiers CSS externes à votre application Flask, en garantissant style.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal