Importer un css en multipage avec vite.js

Le problème exposé dans ce sujet a été résolu.

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. ;)

+0 -0

C’est curieux, tout n’est pas mis dans le main.XXXX.css ?

Tu peux partager ta config vite ? vite.config.js ?

+0 -0

Alors je crois que j’ai réussi à faire fonctionner tout ça !

  • J’ai tout mon css dans mon style.css du dossier racine.
  • Je pointe vers /style.css/ depuis chaque index.html, que ça soit celui du point d’entrée ou celui de chaque page dans son sous-dossier.

Et en procédant ainsi Vite arrive bien à link mon css aussi bien en dev qu’en build !!

Merci pour ta réponse Ashe, je crois qu’elle m’a inspiré ! ;)

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte