我遇到 CSS 文件问题，该文件无法在我的 NodeJs 应用程序中工作。这是我的文件夹内容。
+ controllers
+ models
+ node_modules
- public
index.html
style.css
- views
app.js
package.json
下面是我的 app.js 文件
var express = require('express');
var path = require('path');
var app = express();
app.use(express.static(__dirname + '/views'));
app.use('/static', express.static(__dirname + '/public'));
app.listen(9000)
我是不是做错了什么，因为我是nodeJS新手。
编辑:下面是我的index.html
<!DOCTYPE html>
<head>
<title>Brandme - Internet Marketing Agency</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,100italic,200,200italic,300,300italic,400italic,500,500italic' rel='stylesheet' type='text/css'>
<nav class="menubar" id="menubar">
<div class="listItems">
<div class="listItem">Personal</div>
<div class="listItem">Business</div>
<div class="listItem">Career</div>
<div class="listItem">Sign In</div>
<div class="listItem">Learn More</div>
<div class="listItem"><span class="glyphicon glyphicon-align-justify"></span></div>
</div>
</nav>
<div id="container">
<div class="untop">
<div id="untop_align">
<div id="div">Gaining global recognition has never been this easy</div>
<div style="font-size: 16px; line-height: 25px; margin-top: 30px; font-weight: 500">Brandme is a digital marketing platform that helps promote your business or skill to a large base</div>
<div class="sign_btn"><button class="btn">Start your journey here</button></div>
</div>
</div>
</div>
<div class="container-cover-cover">
<div class="container-cover">
<div class="container">
<div class="row">
<div class="col-md-8">
<div class="sample">
<div class="container">
<div class="row">
<div class="col-md-2"><img src ="" class="imagesfaces" style="display: inline-block;position: relative;"></div>
<div class="col-md-10">
<div class="names-samples"></div>
<div class='positions'></div>
<div></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div id="side">
<div id="sideDescription">
</div>
<div id="sideAuthor">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var collapse = function(){
$(document).ready(function(){
$(window).resize(function(){
var width = $(window).width();
if(width < 700){
$('#menubar').hide();
}
else{
$('#menubar').show();
}
})
})
}
var imageSize = function(){
$(".imagesfaces").width("80");
}
collapse();
imageSize()
</script>
最佳答案
app.use('/static', express.static(__dirname + '/public'));
仅通过 URL 提供一堆静态文件。它不会让浏览器为您请求它们。
您需要显式加载样式表。
<link rel="stylesheet" href="/static/style.css">
关于javascript - CSS 无法与 NodeJS 一起使用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36127465/