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
Top comments (0)