web-dev-qa-db-ja.com

node.jsのejsでスタイルシートを機能させることができません

テンプレート用にnode、express、ejsを使用してシンプルなサーバーを作成しようとしています。サーバーがページをポイントしてロードし、includeステートメントを使用して他のコードを生成することもできます。ただし、何らかの理由でスタイルシートが読み込まれません。

app.js

var express = require('express'),
app = express(),
http = require('http'),
server = http.createServer(app),
fs = require('fs');

var PORT = 8080; 

app.set('view engine', 'ejs');

app.get('/', function(req, res){
res.render('board.ejs', {
    title: "anything I want",
    taco: "hello world",
    something: "foo bar",
    layout: false
  });
});


app.listen(PORT);
console.log("Server working");

Ejsファイルは、views/board.ejsディレクトリにあります。

<html>
 <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='../styles/style.css' />
 </head>
 <body >
    <h1> <%= taco %> </h1>
    <p> <%=  something %> </p>
 </body>
</html>

そして、style.cssはapp.jsに相対的なstyles/style.cssディレクトリにあります

p {
  color:red;
}

私はリンクのhrefについて、board.ejsに対するapp.jsを基準にしたlocalhostを基準とした相対位置を含むすべてのパスを試してみましたが、style.cssだけでも機能しないようです。どんな提案も大歓迎です。

node.jsexpressstylesheetejs
17
Loourr

静的ディレクトリを宣言します。

app.use(express.static(__dirname + '/public'));

<link rel='stylesheet' href='/style.css' />
45
chovy

app.js：

 you must first declare static directory 

app.use("/styles",express.static(__dirname + "/styles"));

ejsファイル：

<link rel='stylesheet' href='/styles/style.css' />
12
ahmed hamdy

最近、私はこれと同じことを扱っていましたが、CSSが機能していませんでした。最後に、私はトリックを取得します。私の静的パスは以下のようなものでした、

const app = express();
const publicDirectoryPath = path.join(__dirname, '../src/public');
const staticDirectory =  express.static(publicDirectoryPath);
app.use(staticDirectory);

そして私のフォルダー構造は

enter image description here

トリックは、定義された静的パスのみを明示的にアクセスすることです。私の場合、CSSはパブリック外にあったため、機能せず、突然、CSSフォルダーをパブリックフォルダー内に移動しました。美しく動作します。

上記の例は、静的パスが1つだけの場合のものです。複数の静的パスの場合、以下のコードを使用できます

const app = express();
const publicDirectoryPath = path.join(__dirname, '../src/public');
const cssDirectoryPath = path.join(__dirname, '../src/css');
const staticDirectory =  express.static(publicDirectoryPath);
const cssDirectory =  express.static(cssDirectoryPath);


app.use(staticDirectory);
app.use('/css/',cssDirectory);

そして私の一般的なHTMLファイルは

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Index</title>
    <link rel="stylesheet"  href="../css/styles.css">
</head>
<body>
<h1>this is index page</h1>
</body>
</html>
0
king neo

Css、imgなどのアプリケーション依存性のエントリポイントを設定するには、server.js（またはこれまでに使用されたもの）に以下の行を追加します。

app.use(express.static(__dirname + '/'))

これは、server.jsが存在する現在のディレクトリからcssファイルを取得するように指示します。したがって、htmlファイルでcssの相対パスを定義できます。

0
Shahid Hussain