Node.js, Express 및 EJS 애플리케이션에서 CSS 파일이 로드되지 않는 이유는 무엇입니까?

Node, Express 및 EJS가 포함된 CSS 파일 포함

styles.css 파일을 로드하는 동안 문제가 발생했습니다. 스택 오버플로 스레드에 제공된 지침. app.js에서 정적 미들웨어를 선언하고 EJS 템플릿에서 CSS 파일을 참조했음에도 불구하고 CSS 파일이 로드되지 않습니다.

개발자 콘솔을 조사한 결과 link 요소의 type 속성이 다음과 같은 것으로 확인되었습니다. 'text/css'가 아닌 'text/html'로 설정하세요. 이러한 불일치로 인해 CSS 파일이 올바르게 적용되지 않을 수 있습니다.

이 문제를 해결하려면 다음과 같이 수정하십시오.

1. server.js에서 정적 미들웨어 선언을 수정하십시오.

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

2. EJS 템플릿에서 CSS 파일 참조를 조정합니다.

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

다음과 같이 변경합니다. , 정적 미들웨어는 styles.css 파일이 있는 공용 디렉토리에 대한 액세스를 제공합니다. 또한 EJS 템플릿의 CSS 파일 참조에서는 선행 슬래시('/')를 제외해야 합니다. 이렇게 하면 애플리케이션이 루트 URL에서 실행되지 않을 때 문제가 발생할 수 있습니다.

위 내용은 Node.js, Express 및 EJS 애플리케이션에서 CSS 파일이 로드되지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!