HTML tidak memaparkan css dalam nodejs-Soal Jawab bahagian hadapan-php.cn

HTML tidak memaparkan css dalam nodejs

WBOY

Lepaskan： 2023-05-17 12:22:07

asal

734 orang telah melayarinya

Dalam proses membangunkan menggunakan Node.js, kadangkala kami menghadapi masalah bahawa gaya CSS dalam html tidak dapat dipaparkan dengan betul. Masalah ini biasanya berlaku kerana kami tidak memperkenalkan fail CSS dengan betul atau kerana tetapan lalai Node.js menyebabkan masalah. Artikel ini akan memperkenalkan dan menganalisis masalah ini dan memberi penyelesaian.

1. Analisis Masalah

Dalam pembangunan Node.js, kami biasanya menggunakan rangka kerja Express untuk membina pelayan dan menggunakan EJS atau enjin templat lain untuk memaparkan halaman. Apabila memaparkan halaman, kami sering memperkenalkan fail CSS melalui teg pautan Kod sampel adalah seperti berikut:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Node.js</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello Node.js!</h1>
  </body>
</html>

Salin selepas log masuk

Walau bagaimanapun, apabila kami membuka halaman dalam penyemak imbas, kami mendapati bahawa fail CSS kelihatan tidak. dimuatkan, mengakibatkan Halaman tidak mempunyai gaya, seperti yang ditunjukkan di bawah:

Pada masa ini, kita perlu menganalisis punca masalah.

2. Penyelesaian

Selepas analisis, biasanya terdapat dua sebab untuk masalah ini:

Ralat laluan fail CSS

Dalam kod contoh di atas, apabila kami memperkenalkan fail CSS, kami menggunakan laluan relatif kepada halaman semasa, seperti styles.css. Jika kami meletakkan fail dalam direktori pada tahap yang sama dengan halaman semasa, laluannya mestilah betul. Walau bagaimanapun, jika kami meletakkan fail dalam direktori lain, laluan itu perlu diubah suai. Sebagai contoh, jika kita meletakkan fail dalam direktori lain myStyles/ daripada halaman semasa, laluan yang betul hendaklah: href="myStyles/styles.css".

Masalah yang disebabkan oleh tetapan lalai Node.js

Dalam tetapan lalai Node.js, rangka kerja Express akan menggunakan folder awam sebagai direktori fail statik , dan tetapan lalai Format .css, .js, .jpg, .png dan fail lain ialah fail statik. Ini bermakna jika kita ingin merujuk fail CSS dalam fail html, kita perlu menyimpan fail CSS dalam folder awam. Contohnya, dalam kod sampel di atas, fail CSS kami disimpan dalam gaya/ subdirektori direktori awam Kami perlu mengubah suai teg pautan kepada:

<link rel="stylesheet" href="/styles/styles.css">

Salin selepas log masuk

Dengan cara ini, fail CSS boleh diimport. biasalah.

3. Ringkasan

Melalui pengenalan dan analisis di atas, kita dapati bahawa apabila membangun dengan Node.js, adalah sangat penting untuk memperkenalkan fail CSS dengan betul. Jika pengenalan tidak berjaya, halaman akan kekurangan gaya dan menjejaskan pengalaman pengguna. Dengan menguasai kaedah pengenalan yang betul, kami boleh membangunkan tapak web dan aplikasi berkualiti tinggi dengan lebih baik.

Atas ialah kandungan terperinci HTML tidak memaparkan css dalam nodejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!