CODEWITHSUNDEEP
viterollupjsastrojs
dotnetCarpenter
dotnetCarpenter

Reputation: 11331

How do I configure Astro to output separate CSS from HTML?

By default, in Astro, the CSS is duplicated and injected into each HTML file in a <style> tag. I got a very small site with a couple of pages and minimum CSS.

My CSS in mainly in a external .css file src/style/base.css but also inside components, that are reused across pages.

As it is now, all of the styles are inside a <style> element, inside the <head> element. Because of that, I can not use Astro Purgecss, because that only works when HTML and CSS is separated into different files.

I like having old visual effect styles laying around in my CSS, so I can quickly use them again, if needed. And I'm used to frameworks removing unused styles for my build.

How can I get that with Astro? I only need some way to configure Astro to output a single CSS file.

PS. PurgeCSS is not the only tool that requires HTML and CSS to be split into separate files. The same goes for uCSS and UnCSS.

Upvotes: 1

Views: 2119

Answers (1)

SILVA DIAZ DIEGO HARDY
SILVA DIAZ DIEGO HARDY

Reputation: 56

I hope this can help you to solve your problem... from official documents: https://docs.astro.build/en/guides/styling/#production

If you would rather all project styles remain external, you can configure the inlineStylesheets build option.

import { defineConfig } from 'astro/config';

export default defineConfig({
  build: {
    inlineStylesheets: 'never'
  }
});

Upvotes: 2

Related Questions