Question

我只是在学习，所以需要一些帮助。

当我尝试将html文件加载到本地服务器上时，它不会加载styles.css文件。

我在我的“公共”文件夹上使用了express.static，并修改了html文件中styles.css的路径。一些帮助会很棒。谢谢。

文件夹路径：css

C：\ Newsletter-Signup \ public \ css \ styles.css

我尝试在其上应用了.css的

html文件：

C：\ Newsletter-Signup \ public \ signup.html

！（https://imgur.com/PJO7J4H）

这是我的app.js文件：

const app = express();

app.use(express.static("public"));

app.get("/", function(req, res){
  res.sendFile(__dirname + "/signup.html" );
});

app.listen("3000", function(){
  console.log("server started on port 3000");
});

这是我指向无法加载的styles.css的链接：

< link href="css/styles.css" rel="stylesheet" >

Answer 1

在这里，我想为您介绍一个通用的解决方案。因此，这可能有助于解决在尝试代码时发生的问题。

生成Express应用程序项目时，我使用了Express Js官方网站中推荐的命令npm install -g express-generator。由此，我可以轻松地为Express应用创建文件夹结构。

.pug文件格式

默认情况下，生成的Express应用仅允许您呈现.pug文件格式，而不是.html文件格式。 Express-generator通过npm install pug -- save安装pug节点模块，同时安装其他必需的依赖项。安装pug依赖项后，允许渲染.pug文件使用localhost URL在根目录中。

app.js

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

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

app.get('/', function(req, res, next) {
  res.render('<pug file name>', { title: 'Express' });
});

将当前目录设置为应用程序根目录，并从终端运行命令npm start并访问URL http://localhost:<Port Name>/

然后您可以看到渲染的.pug文件。

获得对.html文件格式的支持

由于Express Js支持.pug文件格式，因此您需要安装ejs节点模块以获得对.html格式的支持。

npm install ejs --save

然后需要如下更新app.js文件内容

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');

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

app.get('/', function(req, res, next) {
  res.render('<html file name>', { title: 'Express' });
});

现在您将看到.html文件已正确呈现。

添加样式表以表示应用

在app.js文件中，已经为静态文件设置了目录路径，如下所示。

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

这意味着public文件夹被设置为静态文件目录。因此，在head标签内链接样式表时，样式表的相对路径应声明为'stylesheets/style.css。

<head>

  <meta charset="UTF-8">
  <title>Title</title>
  <link rel="stylesheet" type="text/css" href="stylesheets/style.css">

</head>

将CSS样式表与express.static问题链接

1 个答案:

.pug文件格式

获得对.html文件格式的支持

添加样式表以表示应用