Блог

Главная - Вопросы по программированию - Как загрузить внешний файл CSS в HTML с помощью Express

Как загрузить внешний файл CSS в HTML с помощью Express

#javascript #node.js #express

#javascript #node.js #экспресс

Вопрос:

Я пытаюсь загрузить html-файл, который также содержит стиль. Могу ли я загрузить html-файл, содержащий стиль?

Обновление: стиль загружается через внешний файл CSS

 const express = require('express');
const fs = require('fs');
const app = express();

app.get('/', (req, res) => {
  res.sendFile(__dirname   '/index.html');
});
app.listen(3000)

Комментарии:

1. Встроенный CSS конечно, ссылки на стили с CDN также будут работать. Почему бы не попробовать это, перейдя к маршруту и убедившись в этом сами. Не уверен, запрашиваете ли вы внешние локальные файлы CSS?

2. @ambianBeing я загрузил index.html файл, к которому привязан внешний css. Но отображается только часть html. Стиль не отображается..

3. В этом случае, пожалуйста, обратитесь к ответу, который я опубликовал, и проверьте его, если это поможет.

Ответ №1:

Да, вы можете загрузить его. HTML, который содержит или ссылается на CSS, по-прежнему является действительным HTML.

Ответ №2:

Чтобы загрузить внешний файл CSS, вы можете использовать их как статические файлы с помощью express express.static , а затем ссылаться на него в файле HTML.

Например: предположим, что эта структура каталогов обслуживает public папку

 |---node_modules 
|---index.html 
|---package.json
|---package-lock.json 
|---server.js
|---public  
    |---images 
    |---js 
    |---css
        |--style.css

server.js

 app.use(express.static("public"));
app.get("/", function (req, res) {
  res.sendFile(path.join(__dirname, "/index.html"));
});

index.html

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/style.css" />
    <title>Document</title>
  </head>

  <body>
    <h1>This is index.html</h1>
  </body>
</html>