How To Recompile Bootstrap's Sass In VSCode

[@piricuaco]

This is the video I've been looking for, everything really detailed, Thanks!!!

[@pixelrocket66]

Glad it was helpful!

[@jw3b24]

I've spent 2 days trying to get the sass / scss files compiled like this and the live sass server worked, but the configs were confusing and I wasnt comfortable with it. I like how you did it here, so much easlier. !thanks!

[@pixelrocket66]

Great, glad it helped!

[@aidanwatt8707]

Great job and superb clarity attached to common sense. Thanks

[@pixelrocket66]

Glad it was helpful!

[@aidanwatt8707]

I have followed your framework which worked fine except for one small item. I used the Navbars Offcanvas html instead of just a navbar. I do have a bootstrap website but the offcanvas part is not working nor the color mode button. Can you give me a heads up how to connect them again.

[@ParhamSalamati]

Very strait forward, right to the point, thanks for sharing ^_^

[@naadiyarizvi6102]

why cant I generate the main.css

[@pixelrocket66]

Something I should point out regarding using NPM to install Bootstrap and then using a plugin in VSCode to recompile your Sass. Be aware that if you don't use a build tool (such as Parcel), but try to reference the Bootstrap Javascript file from inside the node_modules folder, you will run into trouble when you deploy your site on something like Netlify. So best in that case to just reference the JS Bootstrap file via a CDN.

[@BG-xu8be]

Nice, but it would have been more useful if you had shown also how to compile the javascript.

[@loomedai]

Have you made a video that explains how you import the content from the js files, we download in the maner the video explains, into the rest of the project?

[@pixelrocket66]

Let me know if you want me to create a video for any of the build tools or frameworks!

[@666arh]

good tutorial, thank you however, you need to fix the sound issue, there is a noise that causes headache

[@pixelrocket66]

Hi Anwor, thank you for the advice. Are you using headphones?

[@it_girl]

Hi, I have a question. How can i reuse bootstrap sass in my other files? I've been researching about it for almost 5hrs now. But I can't seem to find any solution. Btw your video is a great help. But I'm hoping that someone can answer my question 😊

[@pixelrocket66]

Other files of the same project? If so, then it depends on how those other files are imported, and also how you are importing your sass file. How are you importing your Sass files - using @import or @use? Do you have a single entry point? (so something like a index.scss where you import all sass files for your project)

[@shafs_yt]

i used ur method instead of the one bootstrap provide for vite i ran into one problem other than that its perfect popovers doesn't work I tried to link via cdn also linked to file path can't seem to work for me

[@pixelrocket66]

Did you init the popovers in your JS file? Some of the JS components (like modals) will work through data attributes alone, but popovers require you to add a few lines of JS to your code: getbootstrap.com/docs/5.2/components/popovers/

[@rentonplay8101]

I am using bootstrap 5.2.2. After I recompiled the SCSS file, I compare the orignal Bootstrap.css and the new one. There are some missing classes in the new css file. For example 'bg-dark' is completely vanished...?

[@pixelrocket66]

I suspect you're using the latest version of Bootstrap in your package.json. There have been a few changes made to the latest Bootstrap, so to be safe, use the same version I use in this video. I will be rerecording these videos to use the latest Bootstrap version in the near future!

[@rentonplay8101]

@@pixelrocket66 Thanks. Looking forward to watching it.