Yeah, this is a notable issue since their "native" styling solution doesn't allow for preprocessors like SASS. I personally never use a preprocessor so it doesn't bother me, but I get the frustration. Same goes for typescript support atm but it's in the works!
You can do this too, but the proper way is to use svelte.preprocess.
The reason I don't import directly into components (other than sass variables) is because Svelte strips unused classes, and your imported CSS is going to have a lot of bloat which will need to be stripped, which will result in long build times.
Hi Brian, Ben, et all reading this. For those trying to put Svelte and Bulma together in a project, by coincidence I recently was trying to do the same thing, I think I solved and inside Svelte components it recognizes Bulma. Would be great if I can get oppinnions from you guys, as I was thinking to post some article on next days or make a full example maybe connecting it to a REST api, but now reading this great posts and yor comments, maybe I should investigate about svelte.preprocess first to give it a try.
Yeah, this is a notable issue since their "native" styling solution doesn't allow for preprocessors like SASS. I personally never use a preprocessor so it doesn't bother me, but I get the frustration. Same goes for typescript support atm but it's in the works!
Just use sass preprocessor and then import anything with @import from anywhere you want
github.com/kazzkiq/svelte-preproce...
That's why the svelte compiler has a preprocess option. It is very much allowed.
This module, and its docs, have never failed me.
npmjs.com/package/svelte-preprocess
that's what make it more better
Right. I was just trying to bring in Normalize.css and Bulma.css for a little project and couldn't for the life of me figure it out haha
can't you use
<svelte:head/>to achieve this?I have no idea. Tbh
You should be able to do a standart style or script include in the
template.htmlI guess I am just so used to importing CSS files in JavaScript, the React way. Thanks! I'll give it another shot with Svelte
You can do this too, but the proper way is to use svelte.preprocess.
The reason I don't import directly into components (other than sass variables) is because Svelte strips unused classes, and your imported CSS is going to have a lot of bloat which will need to be stripped, which will result in long build times.
That makes a lot of sense. Thanks! I plan on giving Svelte another go here soon.
Hi Brian, Ben, et all reading this. For those trying to put Svelte and Bulma together in a project, by coincidence I recently was trying to do the same thing, I think I solved and inside Svelte components it recognizes Bulma. Would be great if I can get oppinnions from you guys, as I was thinking to post some article on next days or make a full example maybe connecting it to a REST api, but now reading this great posts and yor comments, maybe I should investigate about svelte.preprocess first to give it a try.
Anyway, here you have the github link: github.com/jumanja/SvelteBulma
Cheers,
Juan
jumanja.net
Ah I liked how you did that!
Importing it in your css file. Pretty clever. That makes it easier, reminds me of how it's done in Next.js too.
This is exactly what I needed @jumanja . Thank you!