Brower sync -Charger le fichier CSS

Version imprimable

1 pièce(s) jointe(s)

Bonjour,

J'utilise SublimeText et BrowserSync afin de rafraichir automatiquement ma page web. Mon "index.html" est donc situé dans "http://localhost:3000/index.html".

Je crée un site web, et je suis amené à avoir plusieurs fichiers HTML. Je décide donc de les placer dans un dossier nommé "HTML". Mon fichier CSS est dans un dossier nommé "CSS".
Pièce jointe 587082

Mon doctype est le suivant :
Code:

1 2 3 4 5 6 7 8 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Christophe DUBOIS</title> <link rel="stylesheet" href="../css/style.css> </head>
En double cliquant sur "index.html", tout marche niquel. Par contre, en affichant mon site avec Browser Sync, j'obtiens l'erreur suivante (et le fichier css n'est pas lancé) :

Citation:

Refused to apply style from 'http://localhost:3000/css/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Je ne comprend pas. Quel réglage de BrowerSync devrais-je paramétrer pour ce ça fonctionne ?
Merci.

21/12/2020, 13h45
mathieu

si vous accéder à la page avec l'URL "localhost:3000/index.html" cela veut dire que le répertoire racine est "html".
donc le répertoire "css" n'est pas accessible et vous devez mettre ce répertoire dans le répertoire "html" pour que ça fonctionne.
21/12/2020, 14h14
preliator

Merci pour votre réponse.

Mais dans le cas où je souhaite avoir des dossiers séparés pour mes contenus HTML, CSS, JS, etc. Comment pourrais-je faire ?
22/12/2020, 14h42
NoSmoking

Bonjour,
souvent il suffit de répondre à l'avertissement et en l’occurrence déclarer le type du fichier et en écrivant la balise de façon conforme :

Code:

<link rel="stylesheet" type="text/css" href="../css/style.css">

1 pièce(s) jointe(s)

Merci pour vos réponses. J'ai copié/collé le code, comme il faut.
Code:

1 2 3 4 5 6 7 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Christophe DUBOIS</title> <link rel="stylesheet" type="text/css" href="../css/style.css"> </head>
Malheureusement, le problème est toujours présent.
Pièce jointe 587242

Merci.

23/12/2020, 10h44
NoSmoking

Citation:

Malheureusement, le problème est toujours présent.

en tenant compte de la remarque de mathieu ?

Citation:

... n'est pas accessible et vous devez mettre ce répertoire dans le répertoire "html" pour que ça fonctionne.
23/12/2020, 10h55
preliator

1 pièce(s) jointe(s)
Effectivement, cela marche en déplacant le dossier CSS dans le dossier HTML. Mais j'aurais aimé éviter cette situation d'avoir des dossiers dans des dossiers, et préféré avoir un dossier pour chaque type d'éléments.

Je pense avoir résolu le problème, en laissant "index.html" au dossier racine, avec un lien simple :
Code:

1 2 <link rel="stylesheet" type="text/css" href="css/style.css">
Et déplacer mes autres pages dans le dossier HTML, avec ceci pour chacun d'eux :
Code:

1 2 <link rel="stylesheet" type="text/css" href="../css/style.css">
Pièce jointe 587296

Tout semble marcher, y compris les liens pour accéder aux pages.

Merci.