Stylesheets

Not your style? You can restyle the entirety of ButterflyVu by overriding it’s CSS. You can either add onto it by using override.css or override.module.css, or completely revamp the index.module.css file.

To Override

In order to override a stylesheet, add the following volume to compose.yml:

...
volumes:
    - ./overrides/styles/override.css:/vu/src/styles/override.css
...

If you want to use a module CSS file, do override.module.css instead of override.css.

If you want to also override the entire style for ButterflyVu, add the same but and use index.module.css instead.

Splash uses splash.css.

Override Module CSS

You should be only adding the override.module.css file if you plan to build custom components.

For example:

---
// src/components/Heading.astro
import OverrideCSS from "@styles/override.module.css"
---

<h2 class={OverrideCSS.heading}>Heading</h2>

/* src/styles/override.module.css */
.heading {
	color: #ccc;
}

For the import name, please use something like OverrideCSS as using CSS may break in existing components.