Hello les agrumes !
J’apprends à utiliser vite.js pour un petit projet que je suis en train de développer. Mon site est multipage et je suis la convention recommandée par vite.js. Voici grosso modo mon arborescence :
├── package.json
├── vite.config.js
├── index.html
├── main.js
├── style.css
└── nested
├── index.html
└── nested.js
J’ai donc pour chacune des pages (autre que l’index.html de la racine) un dossier du nom de la page en question qui contient un fichier index.html avec le code de ma page.
Le problème est que je voudrais que chaque sous page ai accés au css du site, contenu dans le fichier style.css
du répertoire parent.
Si je suis en environnement de dév, je peux insérer le lien vers le fichier css de façon classique, en remontant l’arborescence ainsi : <link href="/../style.css" rel="stylesheet">
. J’ai juste à mettre ça dans le header du index.html de chaque dossier qui contient une sous page, et ça fonctionne. Au moins en environnement de dev.
Le problème est que si je build avec cette configuration, à la build le fichier css est transformé et ajouté à un répertoire asset crée à la build. Dans mon point d’entrée, le lien d’importation du css est automatiquement modifié pour fonctionner et répertorié ce fichier css modifié : <link rel="stylesheet" href="/assets/main.9ce1c967.css">
.
Mais pour mes pages secondaires, elles ne voient pas leurs liens vers ma page css modifiés à la buid, et restent avec ce lien css <link href="/../style.css" rel="stylesheet">
qui ne fonctionne alors plus car ce chemin ne donne rien dans le dossier de build..
J’ai essayé de chercher dans la doc ou en ligne, mais je n’arrive pas à trouver comment écrire mon chemin ou comment modifier ma config pour faire en sorte que mon fichier css soit servi à mes pages secondaires aussi bien en dev qu’en prod !
Merci beaucoup d’avance pour votre aide.