Jak spravovat CSS pomocí esbuild

V tomto článku ukážu, jak přidat styl do naší aplikace. Výchozím bodem je místo, kde jsme skončili v kroku 2.

JS

Pro začátek nahradíme náš fiktivní JS kódem, který alespoň něco vloží na obrazovku. Používám vanilla JS, protože frameworky mají tendenci komplikovat nastavení esbuild. Nastavíme src/index.js na:

import "./style.css";

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

header.innerHTML = "Hello world";

document.body.appendChild(header);
  • import "./style.css"; - ve výchozím nastavení má esbuild nastaven zavaděč CSS, ale styly nejsou součástí balíčku JS. Než se k tomu dostaneme, musíme přidat ./style.css protože teď se nedaří stavět
  • const header = ... &následující řádky - jednoduchý kód pro přidání prvku na stránku. Když to uděláme v JS, jediným pohledem můžeme zjistit, zda JS funguje nebo ne.

CSS

Styl přejde na ./src/style.css :

body {
  color: #66f;
}

Pokud vytvoříme naši aplikaci s npm run build nebo spusťte server s npm run start , uvidíme záhlaví bez barvy. Je to proto, že styly jsou vysílány do souboru stylů – se stejným názvem jako náš balíček, ale s .css rozšíření.

HTML

Abychom zahrnuli styl, musíme přidat:

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

S tímto na místě by aplikace měla vypadat takto:

Odkazy

Repo, větev, krok 3.

Můžete se podívat na můj videokurz o esbuildu.

Souhrn

V tomto článku jsme viděli, jak přidat styl do naší esbuild aplikace. Pokud máte zájem o slyšení, až bude připraven nový díl, můžete se přihlásit zde.