Q&A
静的ファイルは view じやなくて static 使えば良いかと。
実現したいこと
- cssファイルを読み込む
- jsファイルを読み込む
前提
ゲームのbuttonを作っています。
ですが、<link type="text/css" rel="stylesheet.css">でindex.ejsにCSSが読み込めませんでした。
また、<script type="text/javascript" language="javascript" src="game.js"></script>
私なりに調べてみたところ、Node.jsが理由で、CSSが読み込まれないと思われるのですが、ネットに記載されている方法を試してみてもできませんでした。
ご協力お願いします。
該当のソースコード
index.js
1'use strict'; 2const express = require('express'); 3const app = express(); 4const http = require('http'); 5const path = require('path'); 6app.use(express.static(path.join(`${__dirname}views`))); 7app.get('/', (req, res) => { 8 res.render('index.ejs'); 9}); 10const server = http.createServer(app); 11const port = 3000; 12server.listen(port, () => { 13 console.log(`Server is running on port ${port}!`); 14});
index.ejs
1<!DOCTYPE html> 2<html lang="ja" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="description" content=""> 6 <meta name="keywords" content=""> 7 <meta name="author" content=""> 8 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 9 <title>テスト</title> 10 <link rel="stylesheet" type="text/css" href="/css/style.css"> 11 </head> 12 <body> 13 <p id="watch">button</p> 14 <script type="text/javascript" language="javascript" src="/js/game.js"> 15</script> 16 </body> 17</html>
file
1index.ejs 2views - css - stylesheet.css 3 - index.ejs 4 -js - game.js
補足情報
replitを使用しています。
回答1件
0
自己解決
本当に申し訳ありませんでした。pathの仕組みをよく分からず使っていたのが原因だったようで、
index.js
1//app.use(express.static(path.join(`${__dirname}views`))); 2app.use(express.static('views'));
に変更することでできました。ありがとうございました。
投稿2023/04/16 22:21
総合スコア2
あなたの回答
tips
プレビュー
