ホームページ > 記事 > ウェブフロントエンド > HTMLがnodejsでCSSを表示しない
HTMLがnodejsでCSSを表示しない
- WBOYオリジナル
- 2023-05-17 12:22:07708ブラウズ
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 サイトの他の関連記事を参照してください。