Hi @humble onyx. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Unscoped styles by default
urban nymphBOT
Astro's <style> tags are scoped by default, meaning they only apply to the elements within the same component. To make a <style> tag global, you can use the is:global attribute. However, this needs to be done on a per-component basis and there's no built-in way to make all <style> blocks unscoped/global by default in Astro.
Here's an example of how to use the is:global attribute:
<style is:global>
/* Unscoped, delivered as-is to the browser. Applies to all <h1> tags on your site. */
h1 { color: red; }
</style>
This will apply the styles globally, across your entire site, rather than just to the component where the <style> tag is located.
If you want to avoid scoping altogether, you would need to add the is:global attribute to every <style> tag in your Astro components.
Sources:
- Astro Documentation: Global Styles (https://docs.astro.build/en/guides/styling/#global-styles)
- Astro Documentation: Script & Style Directives (https://docs.astro.build/en/reference/directives-reference/#script--style-directives)
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
Let me check the knowledge base for you. One moment! :books:
Astro builds your site for production deployment by minifying and combining your CSS into chunks. Each page on your site gets its own chunk, and additionally, CSS that is shared between multiple pages is further split off into their own chunks for reuse.
When several pages share styles, some shared chunks can become really small. If all of them were sent separately, it would lead to many stylesheets requests and affect site performance. Therefore, by default, Astro will link only those in your HTML above 4kB in size as <link rel="stylesheet"> tags, while inlining smaller ones into <style type="text/css">. This approach provides a balance between the number of additional requests and the volume of CSS that can be cached between pages.
You can configure the size at which stylesheets will be linked externally (in bytes) using the assetsInlineLimit vite build option. Note that this option affects script and image inlining as well.
import { defineConfig } from 'astro/config';
export default defineConfig({ vite: { build: { assetsInlineLimit: 1024, } };});
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' }});
You can also set this option to 'always' which will inline all stylesheets.