bionary's avatar

Variables and Bulma-Extension

Anybody know how to customize Bulma-Extensions? While I'm not very proficient at scss I did try to follow the docs and I still can't make sense of this:

I'm trying to change the bulma-switch background color. I have this:

//app.scss
$switch-background: pink;

@import '~bulma/bulma';
@import '~bulma-switch';

According to the docs: https://wikiki.github.io/form/switch/ I can hook into these variables, but it doesn't seem to work. Bulma and the switch works fine, but the variable doesn't seem to be applied.

For a sanity test, I tried playing around with variables in the regular Bulma library and that worked no problem.

Have any experience/ideas with this?

Thanks

0 likes
7 replies
bionary's avatar

thank you for your response. I think that @import is depricated, but I tried it anyway: @import"../sass/utilities/initial-variables";' errors out... when I compile with npm run dev so I omitted it and tried normal Bulma variables which work fine for regular Bulma. Either way that import line errors.

In all honesty I've never been able to figure out how/why the paths resolve the way they do. phpstorm helped me figure out that @import '~bulma/sass/utilities/initial-variables'; is the correct path and compiles with no error but it still doesn't solve the broken-variables problem with bulma-extensions.

Still cannot get the bulma-extensions variables to work

Gerole10's avatar

@bionary Hi! Did you could get the bulma-extensions variables to work? If so, what steps did you take to make it work? I could use some help, thanks!

bionary's avatar

@Gerole10 I cannot recall. I don' t think I ever got it to work. That was 4 years ago and I stopped using Bulma since then. I just took a peek at the source thinking maybe something would jump out at me, but I have no idea I'm afraid. Sorry pal.

1 like
jebjeb's avatar

How did you get the bulma extension to work? What specific steps did you do? I'm new to scss and I've also been following the docs but I can't make it work

bionary's avatar

@jebjeb you kinda hijacking the thread. It's best to post a new thread, but I'll give you a quick overview here. If you need more help, please post a new thread.

I'm using npm and can pull in packages from npm. you look them up at npmjs.com. you navigate to your laravel directory via command prompt and pull in each bulma and the bulma-extensions.

> npm i bulma
> npm i bulma-extensions

In you app.scss file you import bulma first and each extension individually:

@import '~bulma/bulma';
@import '~bulma-switch';
@import '~bulma-steps';

To see the changes in your compiled css/js you need to go back to the terminal and have npm compile the assets:

> npm run dev

Make sure your css/js is being referenced in your project...so in your main template (probably app.blade.php) make sure you include like:

<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<script src="{{ asset('js/app.js') }}" ></script>

try it and if you need more...post a new thread

1 like

Please or to participate in this conversation.