Comment charger correctement les feuilles de style CSS dans les applications Node, Express et EJS ?

Intégrer CSS dans les applications Node, Express et EJS

De nombreux développeurs ont du mal à charger des feuilles de style CSS dans leurs applications Web créées à l'aide de Node, Express , et EJS. Cet article fournit une solution complète à ce problème courant.

Énoncé du problème :

Malgré les instructions documentées suivantes, les utilisateurs continuent de rencontrer des difficultés lors du chargement des fichiers CSS. Le fichier styles.css reste inaccessible et les outils de développement indiquent que le type de l'élément est défini sur 'text/html' plutôt que 'text/css'.

Solution :

Pour résoudre ce problème, modifiez le middleware express.static dans votre fichier app.js comme suit :

<code class="javascript">app.use(express.static(__dirname + '/public'));</code>

Cela garantit que les fichiers statiques sont servis à partir du répertoire public à la racine du projet.

Inclusion CSS dans EJS :

Après avoir configuré le middleware, vous pouvez inclure le fichier CSS dans votre modèle EJS comme suit :

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

Notez que vous ne devez pas inclure de barre oblique (/) avant le nom du fichier CSS. Ceci est crucial pour que le navigateur identifie et charge correctement la feuille de style.

En implémentant ces modifications, vous pouvez intégrer de manière transparente des feuilles de style CSS dans vos applications Node, Express et EJS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!