CODEWITHSUNDEEP
sasssveltebootstrap-5svelte-3
nstuyvesant
nstuyvesant

Reputation: 1516

Compiling Svelte 3.38.2 and unused Bootstrap 5 SCSS

This article on the Svelte website says, "The compiler (in Svelte's case) can identify and remove unused styles. No more append-only stylesheets!"

There are two options for loading Bootstrap SCSS:

  1. Load all of their SCSS via @import 'node_modules/bootstrap/scss/bootstrap';
  2. Load only what you need to support the components you are using to ensure the generated CSS is as small as possible as documented here.

Would Svelte's compiler eliminate the need to do #2 above? It would be pretty cool if I don't have to get into the details of what in Bootstrap I am and am not using and still get the smallest possible generated CSS.

Upvotes: 1

Views: 420

Answers (1)

Geoff Rich
Geoff Rich

Reputation: 5482

Svelte's unused style removal happens at the component level. It analyzes the selectors used in your component's <style> tag and removes anything not present in your component's markup. Because of this, if you wanted it to remove unused Bootstrap selectors, you would need to import the Bootstrap SCSS into every component so that the compiler could analyze which selectors are being used in that component. Due to Bootstrap's size, this is not recommended. It will massively slow down your build time, since the compiler has to analyze all of Bootstrap's styles for every component. Also, you would end up with duplicated Bootstrap styles across components.

Because of that, I recommend adding Bootstrap to your global SCSS and following Bootstrap's documentation on removing unused styles.

Upvotes: 3

Related Questions