DEV Community

Cover image for Making Ant Design CSS Optimization to Work on CodeSandBox
Sung M. Kim
Sung M. Kim

Posted on • Originally published at slightedgecoder.com on

5 3

Making Ant Design CSS Optimization to Work on CodeSandBox

Photo by Guillaume de Germain on Unsplash

I’ve been creating small sites on CodeSandBox as it saves you much time on installing new packages.

Ant Design provides a way to optimize components & CSS imports using their custom babel plugin (babel-plugin-import) via react-app-rewired without having to eject a create-react-app generated site.

Everything works fine locally but CSS is not applied on CodeSandBox.

Local Demo

This is how it looks locally with the rewired site.

Ant Design CSS Working Locally

You can see that babel-plugin-import injects necessary CSS even after commenting out import "antd/dist/antd.css".

CodeSandBox Demo

Let’s run the same code (shared via GitHub) on CodeSandBox.

Ant Design CSS Not Working on CodeSandBox

If you comment out the CSS import, CSS is not imported any more.

So let’s see how to make CSS work locally & on CodeSandBox.

Making it work on CodeSandBox

The trick is to dynamically import the CSS file by checking if it’s running in production or development mode.

if (process.env.NODE_ENV === "production") {
import("./styles.css");
} else {
// Make sure that the custom stylesheet overrides antd css.
import("antd/dist/antd.css").then(() => import("./styles.css"));
}

If replace previous static imports with dynamic versions, CSS will work on local machine as well as on CodeSandBox (with Ant Design’s optimizations applied in production mode).

Ant Design CSS Working on CodeSandBox

After deploying it on Netlify, you can see babel-plugin-import working via create-app-rewire with reduced CSS size.

Full Ant Design CSS

CSS size reduced

Parting Words

I was building Bunpkgmostly on CodeSandBoxand that was how I got around with the issue.

This might not be the optimal solution so I’d love it if you could provide me any easier way 🙏.

The post Making Ant Design CSS Optimization to Work on CodeSandBox appeared first on Sung's Technical Blog.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more