Question

我正在尝试将我的样式绑定到项目目录中的一些外部CSS中。

我的app结构如下所示：

webDTU
  app.js
  public/
    stylesheets/
      style.css
      avgrund.css
      animate.css

  views/
    index.jade
    UserHome.jade
    ....

  ....

我的UserHome.jade：

doctype html
html
  head
    title MQTT Chat Application
    script(type='text/javascript', src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js')
    link(rel='stylesheet', href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic',  type='text/css')
    link(rel='stylesheet', href='../public/stylesheets/animate.css', type='text/css')
    link(rel='stylesheet', href='../public/stylesheets/style.css', type='text/css')
    link(rel='stylesheet', href='../public/stylesheets/avgrund.css', type='text/css')
  body
    .avgrund-contents
      header
        h1 hi #{title}
      .pr.center.wrapper
        .cf.pr.chat.animate
          .pa.chat-shadow
          .....

我的app.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 mongoose = require('mongoose');

var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/webDTU');



var routes = require('./routes/index');
var users = require('./routes/users');

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(function(req,res,next){
    req.db = db;
    next();
});

app.use('/', routes);

// 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;

我的问题是，不知怎的href='../public/stylesheets/animate.css'没有从我的项目目录加载正确的文件，我不明白为什么它不起作用。

Answer 1

然后在html中使用

href='/public/stylesheets/animate.css'

Node JS中的外部CSS

1 个答案: