I have one thing that prevented me from using Svelte. I can't figure out how to bring in a stylesheet from node modules. I've tried importing it in both js and css. Nothing happens.
I asked about it in their discord and got ignored. Kinda sucks...
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
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.html
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
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.
That's why the svelte compiler has a preprocess option. It is very much allowed.
This module, and its docs, have never failed me.
If you're using the Rollup template, the simplest way I found (that should work with Sapper too), is to use rollup-plugin-postcss.
You can see an example here.
The main idea is to create a SCSS file that imports the stylesheets from the node_modules, and import it in your component.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.