Setting up Bulma with SASS (SCSS) using NPM

[@Genoville]

Hotspots Intro: 00:00 Using CDN method to use Bulma: 01:30 Intro to NPM: 02:49 NodeJS Installation: 03:18 GitBash Installation: 03:58 Set up Bulma using NPM: 04:33 Set up SASS Dependencies: 05:22

[@slippinchillin]

Great video! I will give this 5/5 For anyone figuring out how to set up Bulma customization, this is the perfect video for you. You have everything you want to know here, and nothing extra. Weird accent tho 😂

[@Genoville]

Yea, English isn't my first language.

[@janusu]

High marks for this tutoral! And timely for me, as I've just set out to build a site with the Bulma framework and you had only just published this a week before. The frustrating thing is that the Bulma website had all the documentation I needed, as you showed us, but they didn't really make it clear how to find it. Your walkthrough on the NPM setup was invaluable and saved a lot of time. Thank you for this!

[@mateodifran]

great tutorial man!, still works!

[@thomascree9964]

omg you are my hero! i just made a project in tailwind using npm with no idea what was going on. I decided to try my luck with bulma npm and your video had not only taught me how to set up the project but what each step is for! i am saving this video to watch for every project. Thank you so much sir!

[@Smboosbh]

Nice and sweet. Thank you very much for this tutorial.

[@jtothey1993]

excellent video. I was stuck on this, thanks!

[@rishandilruk9365]

very helpfull keep it up bro

[@komorebi4045]

Thankyou im a beginner in using bulma and i didnt really understand the documentation.

[@birdbrainsolutions6112]

Great video, thank you for creating it! Please consider creating a video on how to setup bulma and sass with underscores theme

[@ethansausa8588]

Thank you man this was a great video and was very helpful for me. I appreciate it!

[@jimbojoho]

Thank you SO much! Great tutorial 😊

[@geetanjalivadehra8197]

Thank you for this tutorial!

[@alexhunter4800]

thanks man! helped a lot!

[@kasperkat2004]

Excellent. Thank you

[@Sheynan55]

Thanks this video was a life saver. Although the git-bash was unnecessary imo.

[@Genoville]

Yes, that's optional. You can use cmd

[@knyazevtaras]

Very good!

[@thomascree9964]

If you have a video on adding custom styles, colors etc to bulma projects that would be amazing!

[@Noriyak1]

normal ppl: spending hours or days to learn sass, nodejs and bulma me: watching some indian dude and and learn the same amount

[@Genoville]

Lol

[@vishnuharshan2299]

I can’t change txt file extension to scss as explained in the video. It’s still remains as text document even I have changed the name into mystyle.scss. I tried to search for it online but no relevant solution found. I can change it to css though but It won’t help to further steps right? Everything else worked as it’s supposed to be till this point. Any suggestions?

[@Genoville]

Open any folder > in the menu bar where you have file, home etc, click on view > check/tick "File extension" option. If this option is not checked, .txt part remains hidden. So even when you save it as file.scss, it gets saved as file.scss.txt (.txt being hidden)

[@vishnuharshan2299]

@@Genoville thanks brother that helped, And I’m getting error (code ELIFECYCLE) while run $ npm run css-build after altered script section in packet.json file . Redone everything one by one several times still getting the same error. Gone through several websites for solution but nothing helped. Please help if you know how to correct this

[@antoniosuarez7516]

​@@vishnuharshan2299 i was having the same error because mystyles.scss file name was written wrong

[@coreyguitars533]

Thanks man

[@dilancroos3504]

Can you do a dark mode theme using Bulma scss

[@Genoville]

Yes. If you go to bulma website > documentation > elements > button for example, you can see there are the default dark button colors too. You can use your own colors too and you can use a bit of javascript to do the switching between the themes.

[@pieter-janscheir5618]

Please use VS Code, so much easier and you'd use only 1 IDE. Please make a video on custom styling please.

[@letcode]

Hi, nice tutorial, just want to know how to remove unwanted css from bulma.css. Thank you 😌

[@Genoville]

If you are using sass/scss then it is easy. While using sass, we have different sass files, each file has code related to specific components. And then these different files are imported into a main sass file (project/node_modules/bulma.sass). If you open bulma.sass, it will have code lines like @import "sass/utilities/_all" @import "sass/form/_all" So for example You can simply remove the import line for forms if you don't use forms in your project. Now if you are using forms but not checkbox and radio buttons, you can further go to project/node_modules/bulma/sass/form and open _all.sass. you will see that it also imports multiple files like @import "checkbox-radio.sass" @import "input-textarea.sass" So if you don't use checkbox and radio buttons, remove the line that imports its sass file. Lastly, if you want to be more specific. If you use some types of checkbox buttons but not the other ones, you can open checkbox-radio.sass and remove extra code from there.

[@sh4nks109]

tutorial daddy xDD

[@lordoftheflings]

great video, but goddamn thats clunky shit software. so many damn unrelated steps. complete unintuitive dreck.