What Happens When You Import CSS in a React App with Ant Design

Reference

In React development, importing CSS files is a routine task. One of the popular libraries, Ant Design, uses its own CSS, which you can import directly into your app. If you’ve worked with this library, you’ve likely encountered the line:

import "antd/dist/antd.css"; // Import Ant Design styles

For many developers, especially beginners, it might seem like a simple import statement. However, there is more going on under the hood than you might realize. Today, I’ll walk you through what actually happens when you import a CSS file like this in a React project, focusing on how Webpack handles it.

Theoretical Background: What Happens Behind the Scenes

When you run import 'antd/dist/antd.css'; in your React app, it triggers Webpack’s CSS and style loaders. Unlike languages like Python or Java, where an import brings code directly into the runtime, CSS in JavaScript is handled differently.

Webpack, CSS, and Style Loaders

Webpack is responsible for transforming various assets into modules that your application can use. In the case of CSS, it uses two loaders:

1. css-loader: This loader interprets @import and url() paths in the CSS file and resolves them.
2. style-loader: After the CSS is processed by css-loader, this loader injects the resulting styles into the DOM by dynamically adding a <style> tag to the <head> section of your HTML document.

So, when Webpack encounters an import like import 'antd/dist/antd.css';, it doesn’t just load the file. Instead, it transforms the CSS into a JavaScript module that Webpack can inject into the browser during runtime.

Practical Example: How Webpack Handles CSS Imports

To understand this transformation, let’s break it down with an example.

Initial Import in Your React Code

When you write this in your React project:

import "antd/dist/antd.css"; // Import Ant Design styles

This line kicks off a series of transformations via Webpack.

Example of Original CSS (antd.css)

Here’s a simplified snippet of the Ant Design CSS:

/* antd.css */
body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
}

.button {
  background-color: blue;
  color: white;
  padding: 10px;
}

Transformed JavaScript Module Output (Simplified)

Webpack converts this CSS into a JavaScript module. Here’s a simplified example of the transformation:

// Generated by Webpack's css-loader and style-loader

// This is a simulated structure of how the CSS is converted to JS by Webpack
module.exports = `
body {
  margin: 0;
  padding: 0;
  font-family: 'Roboto', sans-serif;
}

.button {
  background-color: blue;
  color: white;
  padding: 10px;
}
`;

// Inject the CSS into a <style> tag in the <head> of the document
const style = document.createElement("style");
style.innerHTML = module.exports;
document.head.appendChild(style);

Result in the Browser

After Webpack processes the CSS, it dynamically adds the styles to the webpage. If you inspect the HTML in the browser, you’ll see something like this in the <head> tag:

<head>
  ...
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: "Roboto", sans-serif;
    }
    .button {
      background-color: blue;
      color: white;
      padding: 10px;
    }
  </style>
</head>

The CSS from antd.css is now part of the page, injected via a <style> tag.

Understanding the "Magic"

To summarize, the process involves several steps:

1. Webpack loads the CSS via the css-loader.
2. Webpack injects the styles via the style-loader, converting them into JavaScript that the browser can interpret.
3. The CSS is dynamically added to the <head> of your HTML document as a <style> tag.

This transformation is very different from how typical imports work in other programming languages like Java or Python, where an import brings in code but does not affect the DOM or visual rendering directly.

Last Words

While importing CSS in React might seem straightforward, Webpack’s loaders are doing a lot of work in the background to convert your CSS into something that the browser can apply dynamically. This process ensures that the styles are injected at runtime, allowing for greater flexibility and modularity in your app's styling.

Next time you import CSS in your React project, remember that there’s a complex and fascinating transformation happening under the hood!