Question

所以我有导入路由器的server.js文件

const path = require("path");
const express = require("express");
const app = express();

const PORT = 8080;

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.use(require('./app/routing/htmlRoutes'));

路由器看起来像这样

const path = require("path");
var express = require('express');
var router = express.Router();



router.get('/', function(req, res) {
    res.sendFile('home.html', { root: path.join(__dirname, '../public') });
});

router.get('/survey', function(req, res) {
    res.sendFile('survey.html', { root: path.join(__dirname, '../public') });
});


module.exports = router;

它确实有效！它呈现html页面，但是这些html页面具有css样式表，它们链接到它们并位于同一目录中，但是它们呈现为空白html表单（未样式化）... 如何在考虑CSS样式表的情况下使它们呈现？

Answer 1

当浏览器遇到已加载的html文件的样式引用时，它将尝试加载src属性中指定的文件。现在，您的服务器脚本没有路由。如果为特定的CSS文件添加路由，它将加载CSS。但是，正如Irshad所说，执行此操作的标准方法是为所有静态文件添加路由。

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

现在，您只向home.html每个请求者发送了根请求。

更改代码以从请求中读取请求的文件，并以任何可能的方式提供该文件。

Answer 2

为什么不将中间件设置为提供公用文件夹/** * Implement Gatsby's Node APIs in this file. * * See: https://www.gatsbyjs.org/docs/node-apis/ */ // You can delete this file if you're not using it exports.modifyBabelrc = ({ babelrc }) => ({ ...babelrc, plugins: babelrc.plugins.concat(['transform-regenerator']), })中的静态文件（css，html）

See the working example

为什么express.js路由发送的HTML页面未连接到CSS样式表？

2 个答案: