Question

我想通过node.js使用localhost访问我的.html。我使用express框架。我的.html包含一些CSS，但这不会加载html文件。

代码：

var express = require('express');
var app = express();

app.use(express.static('public'));
app.engine('.html', require('ejs').renderFile);

app.get('/', function(req, res) {
    res.render('FrontPage.html');
});

app.listen(3000, function(){
    console.log("listening to 3000");
})

HTML：

<head>
    <link rel="stylesheet" type="text/css" href="./css/FrontPageCSS.css">
</head>



<body style="background-image:url(./img/bg.jpg)">

<div id="header">
        <a href="./frontPage.html"><img src="./img/Logo.png" height="5%" width="5%" alt="logo"></a>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="./script/FrontPageJS.js"></script>
</div>

<div id="buttonWrapper">
    <div id="first" class="first">
        This is my first button
    </div>

    <div id="second" class="second">
        This is my second button
    </div>
</div>

CSS：

div#header{
    text-align: center;
}
div#buttonWrapper{
    text-align: center;
}
div.madeBefore, div.madeNotBefore{
    border-radius: 25px;
    background: -webkit-linear-gradient(left top, #ffc300 , #ff8300);
    background: -o-linear-gradient(bottom right, #ffc300, #ff8300);
    background: -moz-linear-gradient(bottom right, #ffc300, #ff8300);
    background: linear-gradient(to bottom right, #ffc300 , #ff8300);
    width: 500px;
    height: 425px;
    margin-right: 50px;

    padding:50px;
    padding-top: 250px;
    padding-bottom: 0px;

    display: inline-block;
    vertical-align: top;

    text-shadow: 0 2px 3px rgba(255, 255, 255, 0.3), 0 -1px 2px rgba(0, 0,       0, 0.2);
    color: #B36103;
    font-size: 60px;
    text-align: center;
}
div.madeNotBefore{
    margin-right: 0px;
}
div.madeBefore:hover, div.madeNotBefore:hover{
    background: -webkit-linear-gradient(left top, #ff7600 , #e96c00);
    background: -o-linear-gradient(bottom right, #ff7600, #e96c00);
    background: -moz-linear-gradient(bottom right, #ff7600, #e96c00);
    background: linear-gradient(to bottom right, #ff7600 , #e96c00);
}

如何确保使用.html确认CSS被发送？

Answer 1

添加：

C:/jruby-1.7.23/bin/jruby.exe -r C:\jruby-1.7.23\lib\ruby\gems\shared\gems\wdm-0.1.1\ext\wdm\siteconf20151203-9936-15la6zz.rb extconf.rb
io/console not supported; tty will not be manipulated
C:/jruby-1.7.23/lib/ruby/shared/mkmf.rb:14: Use RbConfig instead of obsolete and deprecated Config.
mkmf.rb can't find header files for ruby at C:/jruby-1.7.23/lib/native/include/ruby/ruby.h

创建文件夹public，将css文件放在html文件中：

var path = require('path');

app.use(express.static(path.join(__dirname, 'public')));

Answer 2

您需要确保您的css内容位于公用文件夹中。例如，如果 public 文件夹中有 css 文件夹，并且您的css文件名为 FrontPageCSS.css ，那么您可以像这样使用

<link rel="stylesheet" type="text/css" href="/css/FrontPageCSS.css">

您可以假设您在公开内部进行参考。

Answer 3

在做任何事之前：

1）验证public /是否在服务器的主文件夹中。（因此，无论您的服务器文件在哪里，public /都应该在同一目录中）

2）...确认css文件实际存在。

然后，使用它来使/ public目录为static：

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

在您的文件中，将其设置为获取CSS：

<link rel="stylesheet" type="text/css" href="/css/FrontPageCSS.css">

Node.js Express框架：无法获取CSS文件

3 个答案: