Bagaimana untuk Memuatkan Lembaran Gaya CSS dengan betul dalam Aplikasi Nod, Express dan EJS?

Membenamkan CSS ke dalam Aplikasi Node, Express dan EJS

Ramai pembangun bergelut untuk memuatkan lembaran gaya CSS ke dalam aplikasi web mereka yang dibina menggunakan Node, Express , dan EJS. Artikel ini menyediakan penyelesaian menyeluruh kepada isu biasa ini.

Pernyataan Masalah:

Walaupun mengikut arahan yang didokumenkan, pengguna terus menghadapi kesukaran memuatkan fail CSS. Fail styles.css kekal tidak boleh diakses dan alat pembangun menunjukkan bahawa jenis elemen ditetapkan kepada 'teks/html' dan bukannya 'teks/css'.

Penyelesaian:

Untuk menyelesaikan isu ini, ubah suai perisian tengah express.static dalam fail app.js anda kepada yang berikut:

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

Ini memastikan bahawa fail statik disampaikan daripada direktori awam di akar projek.

Kemasukan CSS dalam EJS:

Selepas mengkonfigurasi middleware, anda boleh memasukkan fail CSS dalam templat EJS anda seperti berikut:

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

Perhatikan bahawa anda tidak seharusnya memasukkan garis miring hadapan (/) sebelum nama fail CSS. Ini penting untuk penyemak imbas mengenal pasti dan memuatkan helaian gaya dengan betul.

Dengan melaksanakan perubahan ini, anda boleh menggabungkan helaian gaya CSS dengan lancar ke dalam aplikasi Node, Express dan EJS anda.

Atas ialah kandungan terperinci Bagaimana untuk Memuatkan Lembaran Gaya CSS dengan betul dalam Aplikasi Nod, Express dan EJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!