2
votes

html ne charge pas le fichier css local

J'ai examiné certaines des mêmes questions sur le débordement de pile et j'ai essayé toutes les meilleures réponses. Aucun d'eux n'a fonctionné.

J'apprends le html5 avec la feuille de style CSS. J'ai regardé un tutoriel de site Web sur la construction d'une page Web avec un formulaire de connexion par flask. Donc, il a ce fichier base.html qui a des liens de code vers un fichier css:

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>RELAX AND WORKOUT</title>
  <link rel="stylesheet" href="bulma.css" />
</head>

À l'origine, suivi de 'href' était un lien http et cela fonctionnait. Mais j'ai téléchargé le même fichier css et l'ai mis dans le même dossier que le fichier base.html afin de pouvoir jouer avec ce fichier css.

Ils sont tous les deux à ./project/templates/the_file

Voici le lien pour télécharger le fichier css: https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.css

C'était aussi à l'origine le auteur du tutoriel mis après 'href ='. Mais quand je l'ai changé en mon nom de fichier local 'bulma.css', il ne charge pas du tout la feuille de style. J'ai également essayé le chemin absolu et le chemin relatif. Aucun d'eux n'a fonctionné. Je l'exécute sur Windows 10. En utilisant Python 3.7 et flask. Donc dans mon cas, comment puis-je faire en sorte que le html charge ce fichier css local?

Edit:

Ok, je l'ai finalement fait fonctionner.

J'ai fait un nouveau dossier appelé "statique" et mettez le fichier css à l'intérieur. Ensuite, j'ai changé le chemin vers ceci:

.

Cela signifie-t-il que flask traite le dossier "templates" comme un dossier spécial uniquement pour les modèles html, il ne reconnaît pas les autres formats de fichiers?

Mais j'ai vu une question dans laquelle la personne a placé son fichier css le même répertoire. La réponse est d'ajouter simplement un point et cela a fonctionné. C'est pourquoi je l'ai mis avec tous les autres modèles html dans mon dossier de modèles. Mais cela n'a jamais fonctionné dans mon cas.


3 commentaires

Vous pouvez essayer de définir le 'href' sur cdnjs.cloudflare .com / ajax / libs / bulma / 0.7.4 / css / bulma.css


@RylandGoldman Oui, je sais, et cela a fonctionné. Mais il est hébergé en ligne, ce qui signifie que je ne peux pas modifier le fichier css. Je veux le modifier et voir comment la page Web change. C'est pourquoi je l'ai téléchargé.


inclure votre structure de fichiers pour obtenir de meilleures réponses


4 Réponses :


0
votes

Essayez de remplacer votre href = "bulma.css" par href = "./ bulma.css" et voyez si cela fonctionne.


0 commentaires

0
votes

Êtes-vous sûr de ne pas avoir à aller dans le dossier des modèles? "/templates/bulma.css"


0 commentaires

0
votes

Appuyez sur F12 pour ouvrir le volet de développement. Accédez à l'onglet réseau. Actualiser la page. Le fichier est-il répertorié dans cette liste? Vous devrez peut-être actualiser votre cache pour qu'il prenne effet. Pour ce faire: CTRL + SHIFT + R. Si le fichier y est répertorié, vous pouvez afficher l'aperçu pour vous assurer qu'il est à jour, sinon vous devrez toujours effectuer une actualisation forcée du cache.

Comme pour les URL, vous pouvez également utiliser un chemin de fichier absolu commençant à la racine par href = "../ project / templates / filename.css" (utilisez 2 points). Voici un site Web pour plus d'informations à ce sujet:

https://www.w3schools.com/html/html_filepaths.asp


0 commentaires

1
votes

À partir de la documentation Flask:

Flask ajoute automatiquement une vue statique qui prend un chemin relatif au répertoire flaskr / static et le sert. Le base.htmltemplate a déjà un lien vers le style.cssfile:

<head>
    <link rel="stylesheet" href= {{ url_for('static', filename='bulma.css') }}>
</head>

Vous devez créer un dossier appelé statique dans le répertoire de votre application flask avec vos fichiers statiques à l'intérieur, par exemple: CSS, images, etc.

Dans votre code html, utilisez:

{{ url_for('static', filename='style.css') }}


0 commentaires