Node、Express、および EJS アプリケーションに CSS スタイルシートを適切にロードするにはどうすればよいですか?

Node、Express、および EJS アプリケーションへの CSS の埋め込み

多くの開発者は、Node、Express を使用して構築された Web アプリケーションに CSS スタイルシートを読み込むのに苦労しています。 、EJS。この記事では、この一般的な問題に対する包括的な解決策を提供します。

問題の説明:

文書化された手順に従っているにもかかわらず、ユーザーは引き続き CSS ファイルをロードする際に問題が発生します。 style.css ファイルはアクセスできないままで、開発者ツールは要素のタイプが「text/css」ではなく「text/html」に設定されていると示します。

解決策:

この問題を解決するには、app.js ファイル内の Express.static ミドルウェアを次のように変更します。

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

これにより、静的ファイルが、ファイルのルートにあるパブリック ディレクトリから提供されるようになります。 project.

EJS への CSS の組み込み:

ミドルウェアの構成後、次のように EJS テンプレートに CSS ファイルを含めることができます:

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

CSS ファイル名の前にスラッシュ (/) を含めないでください。これは、ブラウザがスタイルシートを正しく識別して読み込むために非常に重要です。

これらの変更を実装することで、CSS スタイルシートを Node、Express、および EJS アプリケーションにシームレスに組み込むことができます。

以上がNode、Express、および EJS アプリケーションに CSS スタイルシートを適切にロードするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。