HTML은 nodejs에 CSS를 표시하지 않습니다.-프런트엔드 Q&A-php.cn

HTML은 nodejs에 CSS를 표시하지 않습니다.

WBOY

풀어 주다： 2023-05-17 12:22:07

원래의

734명이 탐색했습니다.

Node.js를 사용하여 개발하는 과정에서 html의 CSS 스타일이 제대로 표시되지 않는 문제가 가끔 발생합니다. 이 문제는 일반적으로 CSS 파일을 올바르게 도입하지 않았거나 Node.js의 기본 설정으로 인해 문제가 발생했기 때문에 발생합니다. 이 기사에서는 이 문제를 소개하고 분석하며 해결책을 제시합니다.

1. 문제 분석

Node.js 개발에서는 일반적으로 Express 프레임워크를 사용하여 서버를 구축하고 EJS 또는 기타 템플릿 엔진을 사용하여 페이지를 렌더링합니다. 페이지를 렌더링할 때 링크 태그를 통해 CSS 파일을 소개하는 경우가 많습니다. 샘플 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Node.js</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hello Node.js!</h1>
  </body>
</html>

로그인 후 복사

그런데 브라우저에서 페이지를 열면 CSS 파일이 로드되지 않는 것 같은 현상이 발생합니다. 아래 그림과 같이 페이지에 스타일이 없습니다.

이때 문제의 원인을 분석해야 합니다.

2. 해결 방법

이 문제는 일반적으로 두 가지 이유 때문에 발생합니다.

잘못된 CSS 파일 경로

위 예제 코드에서 CSS 파일을 소개할 때 현재 페이지를 기준으로 사용합니다. styles.css와 같은 경로입니다. 현재 페이지와 동일한 수준의 디렉터리에 파일을 배치하면 경로가 정확해야 합니다. 그러나 파일을 다른 디렉터리에 배치하는 경우 경로를 수정해야 합니다. 예를 들어 파일을 현재 페이지와 다른 myStyles/ 디렉토리에 배치하는 경우 올바른 경로는 href="myStyles/styles.css"입니다.

Node.js의 기본 설정으로 인해 발생하는 문제

Node.js의 기본 설정에서 Express 프레임워크는 공용 폴더를 정적 파일 디렉터리로 사용하고 .css, .js, .jpg 및 .png는 기본적으로 파일 형식으로 설정됩니다. 이는 HTML 파일에서 CSS 파일을 참조하려면 해당 CSS 파일을 공용 폴더에 저장해야 함을 의미합니다. 예를 들어 위 샘플 코드에서 CSS 파일은 public 디렉터리 아래의 styles/ 하위 디렉터리에 저장되어 있습니다. 링크 태그를 다음과 같이 수정해야 합니다.

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

로그인 후 복사

이렇게 하면 CSS 파일을 정상적으로 가져올 수 있습니다.

3. 요약

위의 소개와 분석을 통해 Node.js를 사용하여 개발할 때 CSS 파일을 올바르게 도입하는 것이 매우 중요하다는 것을 알 수 있습니다. 소개가 성공하지 못하면 페이지의 스타일이 부족하고 사용자 경험에 영향을 미칠 것입니다. 올바른 도입 방법을 익히면 고품질 웹사이트와 애플리케이션을 더 잘 개발할 수 있습니다.

위 내용은 HTML은 nodejs에 CSS를 표시하지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!