HTMLがnodejsでCSSを表示しない-フロントエンドQ&A-php.cn

HTMLがnodejsでCSSを表示しない

WBOY

リリース： 2023-05-17 12:22:07

オリジナル

756 人が閲覧しました

Node.jsを使って開発をしていると、html内のCSSスタイルが正しく表示されないという問題に遭遇することがあります。この問題は通常、CSS ファイルが正しく導入されていないか、Node.js のデフォルト設定が問題の原因であるために発生します。この記事では、この問題を紹介および分析し、解決策を示します。

1. 問題分析

Node.js 開発では、通常、Express フレームワークを使用してサーバーを構築し、EJS またはその他のテンプレートエンジンを使用してページをレンダリングします。ページをレンダリングするときに、リンクタグを介して CSS ファイルを導入することがよくあります。サンプルコードは次のとおりです:

<!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>

ログイン後にコピー

しかし、ブラウザでページを開くと、CSS ファイルが正しく表示されていないことがわかります。次の図に示すように、ページにスタイルがありません。

現時点では、問題の原因を分析する必要があります。

2. 解決策

分析後、この問題には通常 2 つの理由が考えられます:

CSS ファイルパスエラー

上記のコード例では、CSS ファイルを導入するときに、styles.css などの現在のページに対する相対パスを使用します。現在のページと同じレベルのディレクトリにファイルを配置した場合、パスは正しいはずです。ただし、ファイルを別のディレクトリに配置する場合は、パスを変更する必要があります。たとえば、ファイルを現在のページとは異なるディレクトリ myStyles/ に配置する場合、正しいパスは href="myStyles/styles.css" となるはずです。

Node.js のデフォルト設定によって引き起こされる問題

Node.js のデフォルト設定では、Express フレームワークはパブリックフォルダーを静的ファイルディレクトリとして使用します。、およびデフォルト設定 .css、.js、.jpg、.png およびその他のファイル形式は静的ファイルです。つまり、HTML ファイル内で CSS ファイルを参照したい場合は、CSS ファイルをパブリックフォルダーに保存する必要があります。たとえば、上記のサンプルコードでは、CSS ファイルはパブリックディレクトリのstyles/ サブディレクトリに保存されています。リンクタグを次のように変更する必要があります:

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

ログイン後にコピー

このようにして、CSS ファイルをインポートできます。通常は。

3. 概要

上記の紹介と分析を通じて、開発に Node.js を使用する場合、CSS ファイルを正しく導入することが非常に重要であることがわかります。導入が成功しないと、ページにスタイルが欠けてしまい、ユーザーエクスペリエンスに影響を及ぼします。正しい導入方法をマスターすることで、より質の高いWebサイトやアプリを開発できるようになります。

以上がHTMLがnodejsでCSSを表示しないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。