Install Bootstrap via NPM

Everything was going great until 19 minutes in. Once the Sass Importing for the Functions, Variables and Mixins happen, it breaks. I tried adding one at a time. First the Functions - Error Can't find stylesheet to import. I saw a comment further down saying it doesnt work with BS 5.3 so I tried again with BS 5.2 Same issue. If someone knows how to resolve I would appreciate hearing from you. Thank You

what is the best way to import bootstrap js? import the bootstrap bundle.min.js file in the assets/js/main.js file?

Hi everything's working thanks to your tutorial 🙏 But how do I add another map like text color and background color?

Excellent explanation, and very sharp vocabulary. Thanks a lot

First of all, many thanks. There is such a beautiful and fluent narration that I had no problems in local. The page worked very stable. The only problem was in the build process. It created the necessary files in the dist folder. I threw it at my hosting for trial purposes and noticed that it didn't see the CSS. My page is displayed corrupted. Because I noticed that you don't see the corresponding css file. It is looking for the CSS path as ...href="/index.4717fcfd.css" in the HTML code. It fixed as I removed the "/" at the beginning. What is the reason of this? Why is it creating the "/" sign? How can I fix this problem.

Thanks....

wonderful video! but i have one question:
everytime i do "npm run build" it succsessfully builds, but in the created index.html it does not find the corresponding css and js.

the created path looks somewhat like this:
<link rel="stylesheet" href="/index.c455ebbb.css">

so there is a / in front of the path. by deleting it manually it works just fine – but every build again adds it.

my path in the main.scss looks the following:
<link rel="stylesheet" href="./assets/scss/main.scss">

i would appreciate if anyone has an idea :)

thank you!

Everything works fine, except for Dark Mode. data-bs-theme="dark" does nothing, only works with CDN. Anyone knows how to fix this?

Gave more information than the linked in learning course I paid for. Thanks

hi, I have the following error @parcel/transformer-css: Invalid state
.form-floating::before:not(.form-control:disabled) {
> | ^
2512 | position: absolute;
2513 | top: var(--bs-border-width);

Have anybody ever met this error? Thank you for help

Dont know why, but i had to use command npx parcel src/index.html to make it work. Anyway, thx for the video, it was very helpful

I love this great tutorial, but for some reason parcel doesn't work with the new bootstrap version v5.3.0-alpha1 anymore. Is there a workaround for this issue? Thanks!

What do I do when main visual studio code does not recognize the npm command.

Your voice is perfect. Really relaxing when learning at the same time. Thanks.

Great Tutorial! Thank You!

@parcel/transformer-sass: Can't find stylesheet to import.
╷
7 │ @import "~/bootstrap/scss/functions";
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\assets\scss\main.scss 7:9 root stylesheet

Excellent video, thanks!

Incredibly great tutorial! Thank you!

with tilde operator not working for import

amazing

_variables.scss when I wrote it like this it worked for me: @import "./abstracts/_variables.scss";
Thanks a lot!

Thanks for the excellent video. It has really helped explain the process.

I'm having an issue with the npm run dev command, however. I'm getting an error

Error: Cannot find module './artifacts/index.win32-ia32-msvc.node'

and I can't get past it. Any insight?
Thanks!

Hi this is a very great tutorial, I 'm trying to use it for php files but I'm getting an error. Is there something I need to do for PHP development?

Yeah ! So cool :D, Just wandering what's the correct way to switch from "dev" to a "product" app so i can put my website online witout all uneccessary files ? :D

very good video

Basically Parcel is like Webpack but you don't have to configure an html-loader, minifier, images loader, etc ,etc am I right?

Great great tutorial!

Hi thanks for your tutorial it is helpful but I´m getting stuck on "npm run dev". I´m getting this error:
"unknown: Could not find entry: C:\Users\halli\Documents\PHP_HTML\sali_web\."
I can run the script, but it fails everytime with this error. Do you have any idea what can cause this? i couldn´t find any solution in the comments.

Whenever trying to run "npm run build" after following your every step, it gives me this error:

"🚨 Build failed.

unknown: Could not find entry: C:\Users\Harry.bagg\Desktop\bootsrap\."

Do you know of any reason why it might be looking for bootstrap\. because it's refferenced nowhere in package.json

this was so so helpful, thank you!

Having the same issues as @Bálint Paládi. Here is the error from my screen,

@parcel/transformer-sass: Can't find stylesheet to import.
╷
8 │ @import '~/bootstrap/scss/functions';
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src/assets/scss/main.scss 8:9 root stylesheet
Error: Can't find stylesheet to import.
╷
8 │ @import '~/bootstrap/scss/functions';

Any help is appreciated. Thank you!

npm init not working

Thanks for the video. You mentioned we have to create a new file to modify a bootstrap sass map, how would that look like?

For Windows Users:
after "Install Parcel bundler", Open PowerShell as administrator and run (info about policy):


Set-ExecutionPolicy Unrestricted -Scope CurrentUser -Force
npm install --global --production npm-windows-upgrade
npm-windows-upgrade --npm-version latest



to avoid warning "npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead." in your VSCode terminal.

Thank you so much - I was really stuck today and finding your vid was the first time it started to makes sense. You're a brilliant tutor, I look forward to hearing more from you!

To brincando valeu meu primo

Ensina os bagulho direto mermao, ensina os bagulho dos treco tudo errado meu primo

Good one 🤘

You are a life saver my friend! I've been having the same problem as Diego Vallenilla. The JavaScript for my bootstrap build would load locally but not when hosted on Netlify. I was using NPM for a package manager, but was relying on a Visual Studio plugin to recompile my sass, and I don't think my JavaScript was getting recompiled in the process. I decided to delete everything from my repo and rebuild the solution using Parcel and following your video. The JavaScript now runs and everything is working the way I want it. Keep up the great work man, your videos are awesome!

It is necessary to use Parcel to work with bootstrap through npm?

I create a website project and deployed it to netlify, but once deployed, the javascript stops working. I just used a script tag to link the js to the bootstrap js inside node_modules folder. it works locally but it doesn't work on the server.

Is there a way to fix this? Do I need Parcel?

Btw really good video, I will be using your config for future projects for sure

Thank you , I didn't understand, how did you import bootstrap code in js file?

Hey bud,

Thanks for video guide, it was really helpful and I got everything to work perfectly. Wish the very best for you!

Parcel can't find my imports, even tho if I open it (ctrl+click) it opens

@parcel/transformer-sass: Can't find stylesheet to import.
╷
│ @import "../node_modules/bootstrap/scss/functions";

keep it up man, nice editing + you added chapters which is great

thx pixel👍

problem i got after installing saas and bootstrap through npm
- parcel sever is reacting veery slow to changes. even 5-10s for a change in my .scss file.
Almost impossible to work with such a delay....