There's more...

You're probably curious about how the CSS code is added to the browser since we haven't imported a CSS file to our project directly (by using a <link> tag, for example). Well, you will be surprised to see that the CSS code is being injected into our <head> tag using the <style> tag for each imported stylesheet. If you inspect your project with Chrome DevTools you will see something like this:

This behavior is because the style-loader is a Webpack loader that is being used by default in our application when we create it with create-react-app:

There is no way to modify the Webpack configuration directly when we use create-react-app ...

Get React Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.