How to style components?

[Ungolim]

@c0bra In the docs, there is currently no mention of how to go about applying custom styling and theming to svelma components

[samal-rasmussen]

Importing and customizing Bulma is independent of Svelma.

I was able to use the official Bulma customization documentation to style Bulma in a Svelte project. I based it on this guide specifically:
https://bulma.io/documentation/customize/with-node-sass/

I made an example repo:
https://github.com/samal-rasmussen/svelte-bulma

It uses the default Svelte template from npx degit sveltejs/template my-svelte-project, which I added in the first commit, and all the changes I made in a second commit:
samal-rasmussen/svelte-bulma@8afb28f

I also found some other suggestions on using scss in Svelte from a bunch of other places. Like the using onwarn to supress all the css-unused-selector warnings. And the prependData trick to get variables into all style templates so you don't have to import the variables file yourself everywhere. I also set scss as the default language for styles.

[saravanabalagi]

You can import bulma.css and the color for e.g. primary, success, danger, etc. will adhere to what's defined in bulma.css. I use bulma scss variables and I was able to customize it by simply changing $primary to whatever color I wanted.

[saravanabalagi]

Heads up, if you were experimenting with Tooltip and scss variables, it probably wouldn't work. I did find that Tooltip component did not inherit colors like other components #87.

[saravanabalagi]

I've a why this added happens with some components in #87. As of now, style overrides don't work for Switch, Tooltip, and Dialog components.

[zoulja]

Hello.
I've tried to make a test page according to the description on https://c0bra.github.io/svelma/install but components are not styled.
What I can check to make it work? Probably some step is missed in the guide?
(I'm sure bulma is installed)