Webpack-dev-server: Where does your CSS go?

💡 This might be out of date - 1 years old 💡

You might have noticed when using webpack-dev-server that the CSS seems to appear on the page as if by magic. If you have a look at the build manifest, you’ll see your main.js file listed but no sign of the CSS bundle.

This may lead you to think that webpack-dev-server somehow magically inserts your CSS, meaning that if you wanted to check what CSS was built, you’d have to build the actual static file.

Infact, webpack inserts your CSS as a blob in a link tag in the head. It should look something like this:

<link rel="stylesheet" href="blob:http://localhost:3000/3432f4f3-4a5e-4c50-9b3c-01de2dfc5227">

This is an acutal link and if you click on it, you’ll be able to see all the compiled CSS just as if it was a static file.

Written by who lives and works in Sydney building 3D maps in the browser.