Web アプリケーションを開発する場合、通常は HTML、CSS、JavaScript を使用してページを構築します。 Node.js 開発者にとって、Node.js を使用してページをレンダリングするときに、CSS のレンダリングに失敗することがよくあります。

Node.js では、EJS、Handlebars、Pug などのテンプレート エンジンを使用して HTML ページをレンダリングできます。通常、CSS ファイルは HTML ファイル内で参照しますが、Node.js を使用してサーバー側でページをレンダリングする場合、CSS ファイルが正しく参照されないことがあります。

この問題は通常、ブラウザのセキュリティ ポリシーにより、CSS ファイルを別のソースからロードすることが許可されていないことが原因で発生します。以下にいくつかの解決策を見てみましょう。

1. 静的ファイル ミドルウェアの使用

Node.js を使用してページをレンダリングする場合、サーバーが静的ファイルを正しく読み込めるように、静的ファイル ミドルウェアを使用する必要があります。書類。 Express.js は非常に一般的に使用される Node.js フレームワークであり、静的ファイル提供ミドルウェアexpress.staticが付属しています。

次は、Express.js を使用して静的ファイルを読み込む例です。

const express = require('express'); const app = express(); app.use(express.static('public'));

この例では、静的ファイルをpublicディレクトリに保存します。express.staticを使用すると、ブラウザは CSS ファイルを含む静的ファイルを正しく読み込むことができます。

2. CSS ファイル パスを変更する

Node.js を使用してページをレンダリングする場合、ルーティングを処理するために何らかのルーティング フレームワークを使用することがあります。ルータで/ルート ルートを使用すると、ブラウザは CSS ファイルを読み込めない可能性があります。

これは、ブラウザが/を現在のページ パスではなくサーバー ルート パスに解決するためです。この問題を解決するには、相対パスを使用して CSS ファイルを参照するか、ルーティング パスで相対パスを使用します。

以下は、相対パスを使用して CSS ファイルを参照するサンプル コードです:

      
  
Node.js渲染不出CSS
  

この例では、./を使用して兄弟ディレクトリstyles を参照します。 .cssファイルの下にあります。 CSS ファイルが上位ディレクトリにある場合は、../を使用してファイルを参照できます。

3. CDN の使用

Node.js を使用して Web アプリケーションを開発する場合、CDN を使用して CSS ファイルを読み込むことができます。この方法では、CSS ファイルをサーバーに保存する必要はありませんが、CSS ファイルを CDN サーバーに保存し、CDN リンクを通じて CSS ファイルを読み込みます。

Bootstrap を例として、HTML ファイルで次のコードを使用して Bootstrap をロードできます。

      
  
 
Node.js渲染不出CSS
 
解决起来也很简单哦！
 
  

この例では、Bootstrap の CDN リンクを使用して CSS ファイルを読み込みます。

概要

上記は、Node.js が CSS をレンダリングできない問題を解決するための 3 つの方法です。静的ファイル ミドルウェアの使用、CSS ファイル パスの変更、CDN の使用です。 Web アプリケーションを開発するときは、CSS がレンダリングできないという問題を避けるために、CSS ファイルを HTML ページに正しく参照することに注意する必要があります。

以上がNodejsはCSSをレンダリングできませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。