如何在 Node、Express 和 EJS 應用程式中正確載入 CSS 樣式表？

將CSS 嵌入Node、Express 和EJS 應用程式

許多開發人員很難將CSS 樣式表載入到使用Node、Express 建置的Web 應用程式中和EJS。本文針對此常見問題提供了全面的解決方案。

問題陳述：

儘管遵循了文件說明，但使用者在載入 CSS 檔案時仍然遇到困難。 styles.css 檔案仍然無法訪問，並且開發者工具指示該元素的類型設定為“text/html”而不是“text/css”。

解決方案：

要解決此問題，請將app.js 檔案中的express.static 中間件修改為以下內容：

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

這可確保靜態檔案從應用程式根目錄的公用目錄提供

EJS 中的CSS 包含：

設定中間件後，您可以將CSS文件包含在EJS 範本中，如下所示：

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

請注意，CSS 檔案名稱前不應包含前導斜線(/)。這對於瀏覽器正確識別和載入樣式表至關重要。

透過實作這些更改，您可以將 CSS 樣式表無縫合併到 Node、Express 和 EJS 應用程式中。

以上是如何在 Node、Express 和 EJS 應用程式中正確載入 CSS 樣式表？的詳細內容。更多資訊請關注PHP中文網其他相關文章！