2016-03-31 4 views
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:私は頭のタグの下に私のレイアウトテンプレートにスタイルシートローダーを追加した

+2

は、エクスプレスコードを見ることができますし、他のCSSファイルの読み込みですか? ブートストラップのCSSパスの前に '/'を置く必要があるかもしれません... – JordanHendrix

+0

ぺだんだかもしれませんが、サーバはあなたのブートストラップ資産を "レンダリング"するつもりはありません。 jadeの構文は上のコメントのようにうまくいくので、 'app.use'の明示的な構文とディレクトリ構造を確認してください。しかし、あなたがブートストラップ・ライブラリ全体をインラインでまっすぐに話しているのであれば、それを翡翠で 'インクルード 'することができます。 –

+0

ブートストラップファイルは404ですか? 'app.use(express.static( 'stylesheets'));'? – anthonygore

答えて

0

パブリックフォルダから追加されましたCSSファイル:

doctype html 
html(lang="en") 
    head 
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css')enter code here