집 >웹 프론트엔드 >프런트엔드 Q&A >nodejs는 CSS를 렌더링할 수 없습니다

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

WBOY원래의: 2023-05-25 13:29:37605검색

웹 애플리케이션을 개발할 때 일반적으로 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>

이 예에서는 정적 파일을 public 디렉터리에 저장합니다. express.static을 사용하면 브라우저는 CSS 파일을 포함한 정적 파일을 올바르게 로드할 수 있습니다.

Node.js를 사용하여 페이지를 렌더링할 때 라우팅을 처리하기 위해 일부 라우팅 프레임워크를 사용할 수 있습니다. 라우터에서 / 루트 경로를 사용하면 브라우저가 CSS 파일을 로드하지 못할 수 있습니다.

이는 브라우저가 /를 현재 페이지 경로 대신 서버 루트 경로로 확인하기 때문입니다. 이 문제를 해결하기 위해 상대 경로를 사용하여 CSS 파일을 참조하거나 라우팅 경로에서 상대 경로를 사용할 수 있습니다.

다음은 상대 경로를 사용하여 CSS 파일을 참조하는 샘플 코드입니다.

이 예에서는 ./를 사용하여 동일한 디렉터리의 스타일을 참조합니다. > 파일. CSS 파일이 상위 디렉터리에 있으면 ../를 사용하여 파일을 참조할 수 있습니다.

위 내용은 nodejs는 CSS를 렌더링할 수 없습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript node.js 中间件 css bootstrap html express Static public JS

성명：

이전 기사：Nodejs는 지연 대기열을 구현합니다.다음 기사：Nodejs는 지연 대기열을 구현합니다.