Brower sync -Charger le fichier CSS

**preliator** · 21/12/2020, 14h25

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".
Nom : 2020-12-21_132128.png
Affichages : 138
Taille : 4,0 Ko

Nom : 2020-12-21_132128.png
Affichages : 138
Taille : 4,0 Ko

Mon doctype est le suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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é) :

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.

**mathieu** · 21/12/2020, 14h45

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.

**preliator** · 21/12/2020, 15h14

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 ?

**NoSmoking** · 22/12/2020, 15h42

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**preliator** · 22/12/2020, 22h15

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>