Node.jsを使ったCSSの読み込み方

node.js css読み込み

2015年6月17日 2021年7月14日

cssとjsファイルを取得しようとしたら、うまく出来ませんでした。

どうやって取得するか調べてみると、ファイル読み込みで取れるらしい。

htmlに書くのは変わらないが、apacheみたいにドキュメントルートがないので、自分でドキュメントルートを指定して、node.js内で読み込めるようにします。

CSSを読み込むための準備

CSSを読み込むために、３の準備をします。

HTMLの準備

css.htmlファイルを作成します。

<html>
<head>
  <meta http-equiv="content-type" content="text/html charset=UTF-8">
  <title>css テスト</title>
  <link rel="stylesheet" type="text/css" href="./css/test.css">
</head>
<body>
  <div class="test">
    <p>CSSテスト</p>
  </div>
</body>
</html>

CSSの準備

css/test.cssのファイルを作成します。

div {
  background-color:#ccc;
  width: 200px;
  height: 200px;
}

nodejsのファイルを準備

nodeサーバの準備をします。

css.jsのファイルを作成します。

var http = require(‘http’);
var fs = require(‘fs’);

var server = http.createServer();
server.on(‘request’, getCss);
server.listen(ポート番号, ホスト名);
console.log(‘Server running …’);

function getCss(req, res) {
  var url = req.url;
  if (‘/’ == url) {
    fs.readFile(‘./css.html’, ‘UTF-8’, function (err, data) {
      res.writeHead(200, {‘Content-Type’: ‘text/html’});
      res.write(data);
      res.end();
    });
  } else if (‘./css/test.css’ == url) {
    fs.readFile(‘./css/test.css’, ‘UTF-8’, function (err, data) {
    res.writeHead(200, {‘Content-Type’: ‘text/css’});
    res.write(data);
    res.end();
  }
}

確認

ブラウザから確認してみます。

まとめ

node.jsでCSSを読み込むのは、簡単でした。

動的にCSSを読み込むのは別の機会にでも、行いたいと思います。

: node.js html内のjsファイルの読み込み

前回はnodejsからcssの読み込みを行ったので、今回はjsファイルの読み込みを行います。 Node.jsではあらかじめStaticで直接ファイルを指定するか、フォルダを準備してパスを通すことで複数ファイルを読み込む方法があります。この ...

続きを見る