ホームページ >ウェブフロントエンド >フロントエンドQ&A >NodejsはCSSをレンダリングできません

NodejsはCSSをレンダリングできません

WBOYオリジナル: 2023-05-25 13:29:37605ブラウズ

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

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

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

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

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 ファイルを含む静的ファイルを正しく読み込むことができます。

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

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js渲染不出CSS</title>
    <link rel="stylesheet" href="./styles.css" />
</head>
<body>
    <h1>Node.js渲染不出CSS</h1>
</body>
</html>

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

CDN の使用

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js渲染不出CSS</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" />
</head>
<body>
    <div class="jumbotron">
        <h1>Node.js渲染不出CSS</h1>
        <p>解决起来也很简单哦！</p>
    </div>
</body>
</html>

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

概要

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

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

JavaScript node.js 中间件 css bootstrap html express Static public JS

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Nodejs は遅延キューを実装します次の記事：Nodejs は遅延キューを実装します

続きを見る