2
私のサーバが私のbootstrap.cssをレンダリングするように見えません。私はそれが私のスクリプトの順序と関係があるように感じますが、多分私は間違っています。ここに私の問題を感じている翡翠ファイルがあります。パブリックフォルダ内の実際のブートストラップのようなコードが必要な場合は、何か私に知らせてください。bootstrap.cssをnode/express/jadeに表示するにはどうすればよいですか?
ジェイド
extends layout
block sources
link(rel= "stylesheet prefetch", href= "stylesheets/A6/bootstrap.css")
link(rel= "stylesheet", href="/stylesheets/A6/a6.css")
block content
p#title.col-xs-12.bg-primary.text-center
| Tic - Tac - Toe!
div.col-xs-3.bg-info
div.bg-primary.controls
span
button.btn.btn-default(data-bind="click: StartMessage.bind($root)")
| New Game
p#message.lead(data-bind="if: theMessage.mainMessage")
|Welcome to Tic Tac Toe! This is a 2-player game. Press the "New Game" button above to play.
p#message2.lead(data-bind="if: theMessage.player1Message")
|Player 1, it's your turn.
p#message3.lead(data-bind="if: theMessage.player2Message")
|Player 2, it's your turn.
p#message4.lead(data-bind="text: theMessage.playerWinMessage()")
p#message5.lead(data-bind="text:theMessage.drawMessage()")
h1 Score
table#score
tr
th Player 1
th Player 2
tr
td#p1(data-bind="text:player1Score")
td#p2(data-bind="text:player2Score")
table.bg-success(data-bind="css:{unclickable: playerWin()}" style="table-layout:fixed;")
tr#row1(data-bind="foreach:topRow")
td(data-bind="text:symbol,click:$parent.PlayerTurn")
tr#row2(data-bind="foreach:middleRow")
td(data-bind="text:symbol,click:$parent.PlayerTurn")
tr#row3(data-bind="foreach:bottomRow")
td(data-bind="text:symbol,click:$parent.PlayerTurn")
script(src="/javascripts/A6/knockout.js")
script(type='text/javascript', src="/javascripts/A6/a6.js")
だから私は、私の質問は、このコードは私のプログラムに問題を引き起こす、あると思いますか?
エクスプレス
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var routes = require('./routes/index');
var users = require('./routes/users');
var a1 = require('./routes/a1');
var a2 = require('./routes/a2')
var a3 = require('./routes/a3')
var a4 = require('./routes/a4')
var a5 = require('./routes/a5')
var a6 = require('./routes/a6')
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', routes);
app.use('/users', users);
app.use('/a1',a1);
app.use('/a2',a2);
app.use('/a3',a3);
app.use('/a4',a4);
app.use('/a5',a5);
app.use('/a6',a6);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handlers
// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: err
});
});
}
// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
res.status(err.status || 500);
res.render('error', {
message: err.message,
error: {}
});
});
module.exports = app;
EDIT:追加エクスプレスコード。使用されているエクスプレスジェネレータので、すべての非常に基本的な。パブリックフォルダから
CSS
body {
margin: 10px;
min-width: 628px;
}
.unclickable {
pointer-events: none;
}
#title.col-xs-12.bg-primary.text-center {
line-height: 100px;
height: 100px;
font-size: 5em;
font-weight: bold;
border: solid black 1px;
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
}
div.col-xs-3.bg-info {
height: 501px;
border: solid 1px;
}
div.col-xs-3.bg-info div.bg-primary.controls {
height: 475px;
margin-top: 13px;
margin-bottom: 13px;
padding: 10px;
}
div.col-xs-3.bg-info div.bg-primary.controls button.btn.btn-default {
width: 100px;
display: block;
margin: 0 auto;
}
div.col-xs-3.bg-info div.bg-primary.controls p.lead {
text-align: center;
padding: 5px;
}
table.bg-success {
height: 501px;
width: 75%;
}
table.bg-success td {
border: solid black 4px;
text-align: center;
font-size: 8em;
cursor: pointer;
height: 34%;
}
h1 {
text-align: center;
}
table#score {
height: 100px;
width: 95%;
}
table#score th {
border-bottom: solid black 2px;
text-align: center;
}
table#score #p1 {
border-right: solid black 2px;
}
table#score td {
text-align: center;
}
EDIT 2:私は頭のタグの下に私のレイアウトテンプレートにスタイルシートローダーを追加した
は、エクスプレスコードを見ることができますし、他のCSSファイルの読み込みですか? ブートストラップのCSSパスの前に '/'を置く必要があるかもしれません... – JordanHendrix
ぺだんだかもしれませんが、サーバはあなたのブートストラップ資産を "レンダリング"するつもりはありません。 jadeの構文は上のコメントのようにうまくいくので、 'app.use'の明示的な構文とディレクトリ構造を確認してください。しかし、あなたがブートストラップ・ライブラリ全体をインラインでまっすぐに話しているのであれば、それを翡翠で 'インクルード 'することができます。 –
ブートストラップファイルは404ですか? 'app.use(express.static( 'stylesheets'));'? – anthonygore