CSS ファイルが Node.js、Express、および EJS アプリケーションに読み込まれないのはなぜですか?

Node、Express、および EJS を含む CSS ファイルを含む

に従って、styles.css ファイルをロードしようとしているときに問題が発生しましたスタック オーバーフロー スレッドで提供される手順。 app.js で静的ミドルウェアを宣言し、EJS テンプレートで CSS ファイルを参照しているにもかかわらず、CSS ファイルの読み込みに失敗します。

開発者コンソールを検査したところ、link 要素の type 属性が「text/css」ではなく「text/html」に設定します。この不一致により、CSS ファイルが正しく適用されなくなる可能性があります。

この問題を解決するには、次の変更を加えます。

1. server.js の静的ミドルウェア宣言を変更します。

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

2. EJS テンプレートの CSS ファイル参照を調整します:

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

次の変更を加えます。 、静的ミドルウェアは、styles.css ファイルが配置されているパブリック ディレクトリへのアクセスを提供します。さらに、アプリケーションがルート URL で実行されていない場合に問題が発生する可能性があるため、EJS テンプレート内の CSS ファイル参照では先頭のスラッシュ (「/」) を除外する必要があります。

以上がCSS ファイルが Node.js、Express、および EJS アプリケーションに読み込まれないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。