0

LightTable を使用して nodejs アプリケーションを作成しています<link href="">。タグでファイルへの相対パスを指定すると、css が正常にロードされているようです。を実行するnode index.jsと、サーバーが起動し、ページが正常にロードされますが、コンソール エラーが発生し、指定したパスに CSS ファイルが見つからないという 404 が表示されます。HerokuForeman Startも使ってみましたが、サイコロはありません。html は次のとおりです。

<!DOCTYPE html>
<html>
    <head>
        <title>
            Home
        </title>
        <link href="../../styles/master.css" rel="stylesheet" type="text/css" />
    </head>
...

これが私のディレクトリツリー構造です：

.
├── Procfile
├── README.md
├── index.js
├── package.json
├── resources
│   └── images
│       └── tokyo.jpg
├── styles
│   └── master.css
└── views
    ├── get
    │   ├── home.html
    │   └── posts.html
    └── post
        └── new.html

編集:質問への回答を見つけた後、以下の情報が関連するようになりました。CSS と背景画像を必要に応じてロードする新しいコードをコメントアウトしました。

これが私のルーティングとサーバーコードです。私は意図的に Express を使用していません。

    // routes
    var homeREGEX = new RegExp('^/?$');
    var newREGEX = new RegExp('^/posts/new/?$');
    var postsREGEX = new RegExp('^/posts/?$');
 // var cssREGEX = new RegExp('^/styles/master.css/?$');             <--| static resources also
 // var tokyoREGEX = new RegExp('^/resources/images/tokyo.jpg/?$');  <--| need routes. 

    // server
    var server = http.createServer(function(request, response){
      var pathname = url.parse(request.url).pathname;

      if (homeREGEX.test(pathname)) {
        renderHome(request, response);

      } else if (newREGEX.test(pathname)) {
        renderPostForm(request, response);
      } else if (postsREGEX.test(pathname)) {
        addNewPost(request, response);
   // } else if (cssREGEX.test(pathname)) {           <--| and they need to get
   //   sendCSS(request, response);                   <--| served individually as
   // } else if (tokyoREGEX.test(pathname)) {         <--| they are requested
   //   sendTokyo(request, response);
      } else {
        error404(request, response);
      }
    });
4

2 に答える 2

1

ページを表示するときにブラウザで使用する URL は何ですか? 私の推測では、その部分が含まれていないということです。つまり、リンクの href 属性にviews/getは必要ありません。..\..

また、実際にこれらの静的ファイルを提供していることを確認してください (そうではないようです)。たとえば、express ( nodejs を使用) を使用している場合は、次のようなものが必要になります。

app.use(express.static('resources'));
app.use(express.static('style'));

express.staticドキュメントを参照してください。

于 2014-09-24T06:40:19.570 に答える
1

../../ の代わりに正確なパスを入力してみてください。

<link href="/Procfile/styles/master.css" rel="stylesheet" type="text/css" />
于 2014-09-24T06:45:09.017 に答える