DEV Community

Marcin Wosinek
Marcin Wosinek

Posted on • Updated on • Originally published at how-to.dev

How to manage CSS with esbuild

In this article, I'll show how to add styling to our application. The starting point is where we left in step 2.

JS

To start, let's replace our dummy JS with code that at least put something on the screen. I go with vanilla JS because frameworks tend to complicate the esbuild setup. Let's set src/index.js to:

import "./style.css";

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

header.innerHTML = "Hello world";

document.body.appendChild(header);
Enter fullscreen mode Exit fullscreen mode
  • import "./style.css";- by default, esbuild has CSS loader set up, but styles are not included in JS bundle. Before we get to it, we have to add the ./style.css because now it's failing to build
  • const header = ... & the following lines - simple code to add element to the page. By doing it in JS, by one glimpse, we can tell if the JS is working or not.

CSS

The styling goes to ./src/style.css:

body {
  color: #66f;
}
Enter fullscreen mode Exit fullscreen mode

If we build our application with npm run build or start the server with npm run start, we will see the header without the color. That's because styles are emitted to style file - with the same name as our bundle, but with .css extension.

HTML

To include the styling we have to add:

    <link rel="stylesheet" type="text/css" href="./main.css"/>
Enter fullscreen mode Exit fullscreen mode

With this in place, the application should look like this:

styled-application.png

Links

The repo, branch step 3.

You can check out my video course about esbuild.

Summary

In this article, we have seen how to add styling to our esbuild application. If you are interested in the hearing when there is a new part ready, you can sign up here.

Discussion (0)