Node, Express 및 EJS 애플리케이션에서 CSS 스타일시트를 올바르게 로드하는 방법은 무엇입니까?

Node, Express 및 EJS 애플리케이션에 CSS 삽입

많은 개발자는 Node, Express를 사용하여 구축된 웹 애플리케이션에 CSS 스타일시트를 로드하는 데 어려움을 겪습니다. , 및 EJS. 이 문서에서는 이 일반적인 문제에 대한 포괄적인 솔루션을 제공합니다.

문제 설명:

문서화된 지침을 따랐음에도 불구하고 사용자는 CSS 파일을 로드하는 데 계속 어려움을 겪습니다. styles.css 파일은 계속 액세스할 수 없으며 개발자 도구에서는 요소 유형이 'text/css'가 아닌 'text/html'로 설정되어 있다고 표시합니다.

해결책:

이 문제를 해결하려면 app.js 파일의 express.static 미들웨어를 다음과 같이 수정하세요.

<code class="javascript">app.use(express.static(__dirname + '/public'));</code>

이렇게 하면 정적 파일이 루트에 있는 공용 디렉터리에서 제공됩니다. project.

EJS에 CSS 포함:

미들웨어를 구성한 후 다음과 같이 CSS 파일을 EJS 템플릿에 포함할 수 있습니다.

<code class="ejs"><link rel="stylesheet" type="text/css" href="css/style.css"></code>

CSS 파일 이름 앞에 슬래시(/)를 포함하면 안 됩니다. 이는 브라우저가 스타일시트를 올바르게 식별하고 로드하는 데 중요합니다.

이러한 변경 사항을 구현하면 CSS 스타일시트를 Node, Express 및 EJS 애플리케이션에 원활하게 통합할 수 있습니다.

위 내용은 Node, Express 및 EJS 애플리케이션에서 CSS 스타일시트를 올바르게 로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!