NodeJS和ExpressJS - Javascript文件加载但CSS文件没有

时间:2015-03-07 17:39:49

标签: javascript html node.js express

我正在使用Sequelize使用NodeJS,ExpressJS,AngularJS,Bootstrap和Postgres数据库构建一个Web应用程序。我在加载我的所有"资产"时遇到问题。加载index.html页面时的文件。

所以这是我的结构:

  • server.js
  • 应用
    • index.html
    • app.js
    • 资产
      • CSS
        • styles.css
      • img
      • JS​​
        • javascript文件

这是我的server.js文件:

var express = require('express');
var app = express();
var port = process.env.PORT || 5000;
var database = require('./config/database');
var path = require('path');

app.use(express.static(__dirname + '/app'));

require('./api/routes.js')(app);

app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

app.listen(port, function() {
  console.log("Node app is running at localhost:" + port);
});

这是我的index.html文件:

<DOCTYPE html>
<html lang='en' ng-app="app">
  <head>
    <link src='assets/css/bootstrap.min.css' rel='stylesheet' type='text/css' />
    <link src='assets/css/styles.css' rel='stylesheet' type='text/css' />
  </head>
  <body ng-controller="controller">
    <nav class="navbar navbar-inverse navbar-fixed-top">
    </nav>
    <script src='assets/js/jquery-2.1.3.min.js'></script>
    <script src='assets/js/angular.min.js'></script>
    <script src='assets/js/angular-route.min.js'></script>
    <script src='assets/js/angular-resource.min.js'></script>
    <script src='assets/js/bootstrap.min.js'></script>
    <script src='assets/js/modernizr.js'></script>
    <script src='app.js'></script>
  </body>
</html>

我的问题是,在我当前的设置中,当我启动节点并点击我的localhost:5000时,index.html文件会加载我的所有javascript文件在assets / js文件夹中。当我打开chrome dev工具时,我实际上可以看到该文件夹​​正在源窗格中加载。但是,我的CSS没有加载。这是为什么?任何帮助都会非常感激,因为我基本上已经筋疲力尽了所有其他选择。

1 个答案:

答案 0 :(得分:2)

第一篇文章,所以要慷慨。 :)

你应该使用href来引用你的css文件。

<link href='assets/css/bootstrap.min.css' rel='stylesheet' type='text/css' />
<link href='assets/css/styles.css' rel='stylesheet' type='text/css' />

见这里:http://matthewjamestaylor.com/blog/adding-css-to-html-with-link-embed-inline-and-import