nodejs는 CSS를 렌더링할 수 없습니다-프런트엔드 Q&A-php.cn

nodejs는 CSS를 렌더링할 수 없습니다

WBOY

풀어 주다： 2023-05-25 13:29:37

원래의

529명이 탐색했습니다.

웹 애플리케이션을 개발할 때 일반적으로 HTML, CSS 및 JavaScript를 사용하여 페이지를 구축합니다. Node.js 개발자의 경우 Node.js를 사용하여 페이지를 렌더링할 때 CSS 렌더링 오류가 발생하는 것이 일반적입니다.

Node.js에서는 EJS, Handlebars 또는 Pug와 같은 일부 템플릿 엔진을 사용하여 HTML 페이지를 렌더링할 수 있습니다. 일반적으로 HTML 파일에서 CSS 파일을 참조하지만 Node.js를 사용하여 서버 측에서 페이지를 렌더링할 때 CSS 파일이 올바르게 참조되지 않는 경우가 있습니다.

이 문제는 일반적으로 브라우저가 다른 소스에서 CSS 파일을 로드하는 것을 허용하지 않는 브라우저 보안 정책으로 인해 발생합니다. 아래에서 몇 가지 해결 방법을 살펴보겠습니다.

정적 파일 미들웨어 사용

Node.js를 사용하여 페이지를 렌더링할 때 서버가 정적 파일을 올바르게 로드할 수 있도록 일부 정적 파일 미들웨어를 사용해야 합니다. Express.js는 매우 일반적으로 사용되는 Node.js 프레임워크로 미들웨어 express.static를 제공하는 정적 파일과 함께 제공됩니다. express.static。

下面是一个使用Express.js加载静态文件的示例:

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

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

로그인 후 복사

在这个例子中，我们在public目录下存放我们的静态文件。在使用express.static后，浏览器能够正确地加载我们的静态文件，包括CSS文件。

修改CSS文件路径

在使用Node.js渲染页面时，我们可能会使用一些路由框架来处理路由。如果我们在路由器中使用了/根路由，那么浏览器可能会出现加载不出CSS文件的情况。

这是由于浏览器会将/解析为服务器根路径，而不是当前页面路径。为了解决这个问题，我们可以使用相对路径来引用CSS文件，或者在路由路径中使用一个相对路径。

下面是一个示例代码，它使用了相对路径来引用CSS文件:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js渲染不出CSS</title>
    <link rel="stylesheet" href="./styles.css" />
</head>
<body>
    <h1>Node.js渲染不出CSS</h1>
</body>
</html>

로그인 후 복사

在这个例子中，我们使用了./来引用同级目录下的styles.css文件。如果我们的CSS文件在上级目录中，我们可以使用../

다음은 Express.js를 사용하여 정적 파일을 로드하는 예입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node.js渲染不出CSS</title>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" />
</head>
<body>
    <div class="jumbotron">
        <h1>Node.js渲染不出CSS</h1>
        <p>解决起来也很简单哦！</p>
    </div>
</body>
</html>

로그인 후 복사