Node.jsを使用してHTMLコードにCSSがロードされない

localhost：3000のexpress（）関数を使用してHTMLにCSSを追加しようとしています。残念ながら、何か変です。チュートリアルの手順をステップバイステップで実行しましたが、まだ私のCSSは読み込まれません。私のstyle.cssはのcssフォルダ（css/style.css）です。ここに私のコードは次のとおりです。

app.js（私はアプリとAPP1を使用していることに注意してください）Node.jsを使用してHTMLコードにCSSがロードされない

var app = require('http').createServer(handler); 
var io = require('socket.io').listen(app); 
var fs = require('fs'); 

var express = require('express'); 
var app1 = express(); 

var mySocket = 0; 

app1.use(express.static('/css')); 


app.listen(3000); //Which port are we going to listen to? 

function handler (req, res) { 

    fs.readFile(__dirname + '/index.html', //Load and display outputs to the index.html file 
    function (err, data) { 
    if (err) { 
     res.writeHead(500); 
     return res.end('Error loading index.html'); 
    } 
    res.writeHead(200); 
    res.end(data); 
    }); 

} 



io.sockets.on('connection', function (socket) { 
    console.log('Webpage connected'); //Confirmation that the socket has connection to the webpage 
    mySocket = socket; 
}); 

//UDP server on 41181 
var dgram = require("dgram"); 
var server = dgram.createSocket("udp4"); 

server.on("message", function (msg, rinfo) { 
    console.log("Broadcasting Message: " + msg); //Display the message coming from the terminal to the command line for debugging 
    if (mySocket != 0) { 
    mySocket.emit('field', "" + msg); 
    mySocket.broadcast.emit('field', "" + msg); //Display the message from the terminal to the webpage 
    } 
}); 

server.on("listening", function() { 
    var address = server.address(); //IPAddress of the server 
    console.log("UDP server listening to " + address.address + ":" + address.port); 
}); 

server.bind(41181);

のstyle.css（CSS/style.cssに）

.test 
{ 
    color:red; 
}

インデックス.html

<html> 
    <head> 
     <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 
     <script src="/socket.io/socket.io.js"></script> 
     <link rel="stylesheet" type="text/css" href="/css/style.css" /> 

    </head> 
    <body> 
     <script> 
      var socket = io.connect('http://localhost:3000'); 
      socket.on('field', function (data) { 
       console.log(data); 
       $("#field").html(data); 
      }); 
     </script> 
     <div class='test'>Data from C#: </div><div id="field"></div> 
    </body> 
</html>

出典

2017-09-13 Mehdi

はあなたのコンソールに誤りがありますか？たとえば、style.cssの404と同じです。 – Salketer

'css'ファイルのURLは'/'で始まります。 'localhost'のルートに' css'フォルダーが含まれていることを確認してください。 –

ここ/cssに静的モジュールの電子ルート

app1.use(express.static('/css'));

が、その後、あなたが/css/css/style.css内のファイルのための明示ルックスを意味している/css/style.cssを要求するが（このパスは、プロジェクトに対して絶対的ではないことに注意してください）。

publicフォルダにすべてを入れます。 public/css/style.cssその後、

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

編集：ここではindex.htmlをと（public/css/style.css中）のstyle.cssを提供しています最小限の作業例だ

var express = require('express'); 
var app = express(); 

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

app.get('/index.html', function(req, res, next) { 
    res.sendFile(__dirname + '/index.html'); 
}); 

app.listen(3000);

出典

2017-09-13 08:40:44 Prinzhorn

ありがとう、私は自分のHTMLコードで何かを変更する必要がありますか？ – Mehdi

私はそうは思わない。 expressが '/ css/style.css'リクエストを受け取ると、パブリックフォルダの' public/css/style.css'をチェックし、ファイルが存在すればそれを提供します。 – Prinzhorn

それは動作しませんでした..再びCSSが読み込まれません。私のvar app = require（ 'http'）に依存しているとは思わないでください。createServer（ハンドラ）; – Mehdi

Node.jsを使用してHTMLコードにCSSがロードされない

答えて

関連する問題