Carbon-design-system for Svelte: dynamic import is your only solution !

DISCLAIMER: install sveltekit, carbon design with sveltekit+vite works out of the box !

I've opened issue on IBM community to find a solution rather than importing via <svelte:head>, although I could not even get any answer to that . After sometime of scratching my head and couple of tests on Webpack behaviour, I've managed to crack carbon-design-system for Svelte once and for all . Repeating myself:

POSSIBLE REASON WHY WE NEED DYNAMIC IMPORT RATHER THAN STATIC ONE IS : Svelte acts asynchronously subsequently static import at svelte compiler build stage has not YET registered Carbon-design, in order to upload the Carbon-design theme files (CSS) via Svelte to Dom stage, common sense, you must use dynamic import, onMount cycle just makes sure theming would load within first Svelte load

package.json

// webpack.config.js
...
 resolve: {
    modules: [
      'node_modules'
    ],
}
...

App.svelte

// App.svelte
        onMount(async ()=>{
            // e.g. import ./white.css theme:
            await import("carbon-components-svelte/css/white.css")
       })

Enjoy coding with Svelte <3