이 기사에서는 애플리케이션에 스타일을 추가하는 방법을 보여줍니다. 출발점은 step 2에서 우리가 떠난 곳입니다.

JS

시작하려면 더미 JS를 최소한 화면에 표시하는 코드로 바꾸겠습니다. 프레임워크가 esbuild 설정을 복잡하게 만드는 경향이 있기 때문에 바닐라 JS를 사용합니다. src/index.js를 다음과 같이 설정해 보겠습니다.

import "./style.css";

const header = document.createElement("h1");

header.innerHTML = "Hello world";

document.body.appendChild(header);

import "./style.css"; - 기본적으로 esbuild에는 CSS 로더가 설정되어 있지만 스타일은 JS 번들에 포함되어 있지 않습니다. 시작하기 전에 ./style.css를 추가해야 합니다. 이제 빌드에 실패했기 때문입니다

.

const header = ... & 다음 줄 - 페이지에 요소를 추가하는 간단한 코드. JS에서 수행하면 한 번에 JS가 작동하는지 여부를 알 수 있습니다.

CSS

스타일은 ./src/style.css로 이동합니다.

body {
  color: #66f;
}

npm run build로 애플리케이션을 빌드하거나 npm run start로 서버를 시작하면 색상이 없는 헤더가 표시됩니다. 스타일은 번들과 이름은 같지만 확장자가 .css인 스타일 파일로 내보내지기 때문입니다.

HTML

스타일을 포함하려면 다음을 추가해야 합니다.

    <link rel="stylesheet" type="text/css" href="./main.css"/>

이를 적용하면 애플리케이션은 다음과 같아야 합니다.

연결

repo , 가지step 3 .

내 video course about esbuild를 확인할 수 있습니다.

요약

이 기사에서는 esbuild 애플리케이션에 스타일을 추가하는 방법을 살펴보았습니다. 새로운 부분이 준비되었을 때 청문회에 관심이 있으시면 가입하실 수 있습니다 here .