Sanity Studio build duplicates CSS font import multiple times
@import url("<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap>");
:root {
--color-bubblegum: #ff99f3;
--color-neon: #00dbff;
--color-sand: #ffd662;
--color-offWhite: #fff8ea;
--color-eggPlant: #2e092a;
--color-navyBlue: #00112a;
--color-light: #fff;
/* Font Family */
--font-family-base: "Roboto";
/* Branding */
--brand-primary: var(--color-navyBlue);
--state-info-color: var(--color-bubblegum);
/* Navbar */
--main-navigation-color: var(--color-navyBlue);
--main-navigation-color--inverted: var(--color-light);
}@import url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap);@import> url(<https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap>);I understand this is frustrating! However, I need to be upfront: I couldn't find any documentation indicating this is a known issue with Sanity Studio's build process. This appears to be related to how your CSS is being processed during the build, but without being able to verify whether this is a documented Sanity issue or a configuration problem, I can't definitively say what's causing it.
Here's what I can tell you about Sanity Studio's build system:
Since Studio v3, Sanity uses Vite as the build tool (replacing webpack from v2). Vite handles CSS bundling, and how it processes @import statements can vary based on your configuration and how you're importing your CSS files.
Things to check:
Where are you importing your custom CSS? Make sure you're only importing it once in your
sanity.config.tsfile, not in multiple places or component files. Multiple imports of the same CSS file could cause the build process to duplicate the@importstatements.Are you using CSS modules? If your CSS file is named with
.module.css, Vite treats it differently than regular CSS files, which could affect how imports are processed.Try moving the font import out of CSS - Instead of using
@importin your CSS, add the Google Font directly to your Studio's HTML file (if you have access to it) or load it via a<link>tag. This bypasses CSS bundling entirely and is generally a more performant approach anyway.Custom Vite configuration - If you have custom Vite config in your
sanity.cli.ts, it might be affecting how CSS is processed. You can customize Vite configuration in Sanity Studio, and any custom config is merged with the defaults.
The duplicate imports shouldn't break functionality (browsers ignore duplicate @import statements), but it does bloat your bundle. If you continue having issues, I'd recommend reaching out to Sanity's support or posting in the Sanity Slack community with your specific configuration details - they can help determine if this is expected behavior, a bug, or a configuration issue that needs adjustment.
Show original thread21 replies
Was this answer helpful?
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.
