Install Bootstrap via NPM

  Рет қаралды 36,393

Pixel Rocket

Pixel Rocket

Күн бұрын

Пікірлер: 161
@Sneeit
@Sneeit Жыл бұрын
Your voice is perfect. Really relaxing when learning at the same time. Thanks.
@pixelrocket66
@pixelrocket66 Жыл бұрын
You're very welcome!
@manishjha6239
@manishjha6239 7 ай бұрын
Only one word for this awesome tutorial about bootstrap install via NPM...Superb Man
@loganmagnuson4813
@loganmagnuson4813 2 жыл бұрын
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!
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Awesome, Logan, really glad it helped you!
@Neisyaz
@Neisyaz 2 жыл бұрын
keep it up man, nice editing + you added chapters which is great
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Thank you very much!
@kkokoruz
@kkokoruz 11 ай бұрын
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
@coolmifa
@coolmifa 2 жыл бұрын
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.
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Thanks Trang!
@roccotis
@roccotis 2 жыл бұрын
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!
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Fantastic! Glad it helped you, Joseph!
@roccotis
@roccotis 2 жыл бұрын
@@pixelrocket66 it helped so much! And then naturally I hit my next wall (I'm python background, new to front end, been a while since I felt this stupid...) Any tips on how I would combine a templating engine (ideally EJS) with your example here? I've previously only used express so far...
@pixelrocket66
@pixelrocket66 2 жыл бұрын
@@roccotis Okay, a templating engine will depend on what your build tool is. I think I used Parcel in this video you're watching - is that what you've also used for your project?
@roccotis
@roccotis 2 жыл бұрын
@@pixelrocket66yes I'd love to know how to use EJS/Handlebars with Parcel. I've hacked something together using Express but would prefer Parcel because I love the way it deploys
@pixelrocket66
@pixelrocket66 2 жыл бұрын
@@roccotis Okay, I've not used EJS before, but have a go at using this with Parcel: www.npmjs.com/package/parcel-plugin-ejs-template. Let me know how you get on, might be keen to do my own video just so I can see how straight forward the process is. I use Handlebars whenever I need a template engine.
@laurentiuskollmann1634
@laurentiuskollmann1634 Жыл бұрын
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!
@pixelrocket66
@pixelrocket66 Жыл бұрын
Not sure, I haven't used Bootstrap 5.3 on any projects yet. I filmed this nearly a year ago. One of the things I have on my list for the next few months is to do an updated version of this using Bootstrap 5.3. So hopefully be able to answer you with a video in the near future!
@catalyst8704
@catalyst8704 Жыл бұрын
Everything works fine, except for Dark Mode. data-bs-theme="dark" does nothing, only works with CDN. Anyone knows how to fix this?
@taofeeqomotolani2311
@taofeeqomotolani2311 2 жыл бұрын
Channel is gradually growing😍
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Indeed, very slowly. It's tough making these crash courses though - takes me around 8 hours of planning, filming and editing for a 45 minute course! I've filmed a crash course on CSS animations but I don't have the answer to a really important question. So I'm going to email a few experts this week to see if they'll give me an answer.
@katalinpeli9849
@katalinpeli9849 Жыл бұрын
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
@guerres_puniques
@guerres_puniques Жыл бұрын
Excellent explanation, and very sharp vocabulary. Thanks a lot
@pixelrocket66
@pixelrocket66 Жыл бұрын
You are welcome!
@Tony.Nguyen137
@Tony.Nguyen137 Жыл бұрын
what is the best way to import bootstrap js? import the bootstrap bundle.min.js file in the assets/js/main.js file?
@TheBassUp
@TheBassUp 2 жыл бұрын
Thanks for the video. You mentioned we have to create a new file to modify a bootstrap sass map, how would that look like?
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Difficult to explain this over a comment, but watch my video "Bootstrap for absolute beginners". Or you can watch my series on "Bootstrap Webpack Boilerplate". In either of those videos I show you the full steps to amend Bootstrap sass maps.
@hallionsixtyfive
@hallionsixtyfive 2 жыл бұрын
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.
@theisaiahcc
@theisaiahcc 2 жыл бұрын
For me, the problem was that I had: "main": "./src/index.html" when it should have been: "source": "./src/index.html"
@captured_by_jisan
@captured_by_jisan Жыл бұрын
Great Tutorial! Thank You!
@pixelrocket66
@pixelrocket66 Жыл бұрын
Glad it was helpful!
@cobaltdupont2537
@cobaltdupont2537 2 жыл бұрын
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
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Good question! I want to do a video to show the different steps. It also depends on what you are building (HTML site vs Vue.js vs React). Assuming you are looking to launch just an HTML site, you would run the build command on your build tool. That would create a bunch of files in a folder usually called DIST, sometimes called PUBLIC. Take everything inside that folder and that's what you put live. Better way to do through is to use Github. So you can manually upload those files, but if you create a repo, push all changes to your repo, then connect your repo to your webhost and pull in the repo from there. But that final step can differ depending on what hosting you are using. Again, it's best if I do a video on this because I've had a few people ask the same question!
@cobaltdupont2537
@cobaltdupont2537 2 жыл бұрын
@@pixelrocket66 Thanks for answer ! I tested that by my own. Actually my probleme is that i use a lot of php PDO to get some data in databases. I wanted to add React to create my own components (like buttons for CRUD). Then i wanted to add bootstrap so i found your video (And it s save me a lot of time very nice explications) but i can't make "parcel build index.php" . It tells me "need to be .js or .html". So for now i use only parcel to build .scss to .css but i lost all the build process for js files and my website is way to heavy. P.s. I don't need bootstrap actually but i WANT to use it haha and it s make me crazy P.s.s It s been a while since i code but i m new to web dev, i can make fancy website from scratch but i m starting looking for things like "node" trying to build more "professional" website, and make differents tech work together and i learnt a lot from your channel this passed week
@davidicusrex
@davidicusrex 2 жыл бұрын
Excellent video, thanks!
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Glad you liked it!
@dhc
@dhc 2 жыл бұрын
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!
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Hey Doug, can you put your code on a github repo and send me the repo url? Only paste in the last part of the URL, otherwise KZbin thinks its spam.
@dhc
@dhc 2 жыл бұрын
@@pixelrocket66 Thanks so much for the help. Here is the repo dougcrew/Bootstrap-Boilerplate.git
@pixelrocket66
@pixelrocket66 2 жыл бұрын
@@dhc Okay, I see the issue. Open your main.scss. Have a look at line 8, then compare it to line 15...you should see the issue, but just in case, change "~/bootstrap" to "~bootstrap". Works fine for me now.
@dhc
@dhc 2 жыл бұрын
@@pixelrocket66 That was it!.Thank you for taking the time to reply!
@pixelrocket66
@pixelrocket66 2 жыл бұрын
@@dhc You're welcome!
@leonardofibonacci6574
@leonardofibonacci6574 Жыл бұрын
Good video tutorial. Thanks. However you can do $theme-colors:("custom-colors":#900) directly ,before all the @import (to understand why thi is possible it need open the bootstrap _variables.scss partial)
@VjRocker007
@VjRocker007 2 жыл бұрын
Hey bud, Thanks for video guide, it was really helpful and I got everything to work perfectly. Wish the very best for you!
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Fantastic, glad it helped you!
@kentaasakura8230
@kentaasakura8230 Жыл бұрын
Hi everything's working thanks to your tutorial 🙏 But how do I add another map like text color and background color?
@pixelrocket66
@pixelrocket66 Жыл бұрын
How do you want to use this map, Kenta? Do you want to generate custom text colours? And what version of Bootstrap are you using? I think 5.3 they made a few large changes to how you customize their Sass maps.
@kentaasakura8230
@kentaasakura8230 Жыл бұрын
@@pixelrocket66 I'm using the latest version bootstrap 5.3. Yes I want to generate custom text and background colors, also carousel is not working for me.
@pixelrocket66
@pixelrocket66 Жыл бұрын
and you want to generate these custom colors not from the bootstrap colors, right? Your own? If so, I would add them to the bootstrap theme colors sass map. That way the new colors will be available any components that are generated with the theme colors (so buttons, backgrounds etc). This should show you how to add to the $theme-colors Sass map: getbootstrap.com/docs/5.3/customize/sass/#add-to-map
@leonardofibonacci6574
@leonardofibonacci6574 Жыл бұрын
Two missing things are how to import the js. For example if i want use only popover bootstrap component I could import only jquery,popper libraries and util.js and popover.js instead of all the bootstrap.js In your example you have main.js and I could import from there these files however in this way I have an http request for each import. Could be interesting to see how to setup to have only a js file (babel?). Furthermore bootstrap require autoprefixer, how to setup postcss and autoprefixer to generate the code with autoprefixer. Another thing is that I could have a browserlist for my bootstrap sass code and another browserlist for my .scss component site (header,navbar and so on) and could be difficult to set this thing on my own.
@jakubfrei3757
@jakubfrei3757 Жыл бұрын
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
@pixelrocket66
@pixelrocket66 Жыл бұрын
Great 👍
Жыл бұрын
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....
@pixelrocket66
@pixelrocket66 Жыл бұрын
Hi Umit, is this in your generated dist folder?
Жыл бұрын
@@pixelrocket66 No. He created it when he ran the build command. It created index...html, css, maps and js files in the folder. The names of the files are very different. I removed the "/" sign in the index file and ran it. Currently working stably. But it cannot find the file because the style in the index.html file that it automatically creates when run build calls it as /index... css.
@pixelrocket66
@pixelrocket66 Жыл бұрын
Can you put your project up on a github repo and send me the URL? Don't paste in the full URL here, otherwise KZbin will think you are spamming me. So just include the last part of the repository URL after github.com. I can then take a look for you and suggest a fix.
Жыл бұрын
@@pixelrocket66 nifajans/nifajans
@pixelrocket66
@pixelrocket66 Жыл бұрын
this is just the dist folder. can you place the entire project on there. I need to see your src folder (or whatever you call the source code folder)
@stevemesser4842
@stevemesser4842 2 жыл бұрын
Incredibly great tutorial! Thank you!
@pixelrocket66
@pixelrocket66 2 жыл бұрын
You're very welcome!
@Adventure1844
@Adventure1844 2 жыл бұрын
amazing
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Thank you! Cheers!
@elenadp2686
@elenadp2686 2 жыл бұрын
Thank you , I didn't understand, how did you import bootstrap code in js file?
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Hey Elena, place this code in your main javascript file: import 'bootstrap';
@robbiegeiss7090
@robbiegeiss7090 2 жыл бұрын
this was so so helpful, thank you!
@pixelrocket66
@pixelrocket66 2 жыл бұрын
You're welcome!
@RobertoGalanOL
@RobertoGalanOL 2 жыл бұрын
Great great tutorial!
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Thank you!
@kirkallen3353
@kirkallen3353 2 жыл бұрын
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!
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Hi Kirk. That looks like a Windows error. I haven't used a Windows device since around 2015. But I did a quick search, and found this: github.com/parcel-bundler/parcel/issues/5597. If you have a look at the response from Lukoerfer: github.com/parcel-bundler/parcel/issues/5597#issuecomment-800707525, he suggested it's related to a combination of Windows and Visual Studio Code. He says the fix for him was this: "My "fix" is not related to how Parcel is built or published. It just tells Visual Studio to call the 64-bit version of Node instead of its own 32-bit version." So I would try and configure Visual Studio Code to use the 64-bit version of Node instead of the 32-bit version.
@kirkallen3353
@kirkallen3353 2 жыл бұрын
@@pixelrocket66 thanks for getting back to me. I also found that solution and tried it, but it didn't work. Luckily, I did resolve the issue, however. I uninstalled my node.js and re-installed it directly from the msi file. I then deleted my node_modules folder in the folder from this example and re-installed Parcel, and now it all works! Thanks again for your help and for your excellent videos!
@diegovallenilla8362
@diegovallenilla8362 2 жыл бұрын
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
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Hi Diego, No, you can use Bootstrap without Parcel. You could use a different build tool such as Webpack or a task runner such as Gulp. Or you could just recompile Bootstrap through a plugin in your code editor. Checkout one of my latest videos where I show you how to do that with VsCode. Or you could just use NPM to recompile your Sass. Here's the official starter kit from the Bootstrap team: github.com/twbs/bootstrap-npm-starter. It uses various NPM plugins to handle any rebuilds. If you're just looking for the easiest way to recompile your Sass, I would use the vscode plugin option. In terms of your JS not working, I would have to see your code and your hosting setup. So it's tough to say. Using a build tool shouldn't affect this since you build the files into a your dist folder, and it's that dist folder that should be used for go live.
@diegovallenilla8362
@diegovallenilla8362 2 жыл бұрын
@@pixelrocket66 Hi Pixel, thanks for replying. I fixed the issue including the JavaScript CDN. I think the problem was that the JavaScript was inside node_modules and when deployed, that folder was not there (I used netlify, they say they run npm install when deploying, so bootstrap should be installed I guess) I think maybe another way to fix this problem would be to download the js source files and and include it in the final dist. I tried creating a main.js file and importing the js bundle like in the template you sent, but again, it worked locally and not on the server. I'm just trying to get my head around this, first time using bootstrap, and first time deploying to netlify, so I know I must be doing something wrong, I just don't know what hahaha.
@rossscondie4615
@rossscondie4615 3 ай бұрын
Man... everything worked perfect... even the Minimised code got generated in the dist folder... but when I upoad that to a plain html/php server it just displays the unformatted version as if Bootstrap isn't working at all... does the server need to have bootstrap installed too or should the code work by itself? Any ideas what I've done wrong, as I said everything works perfect on localhost
@pixelrocket66
@pixelrocket66 3 ай бұрын
Do you have a link to your website? Also, put your full project code up on a github repo and send me the repo link.
@rossscondie4615
@rossscondie4615 3 ай бұрын
@@pixelrocket66 Thanks for that offer, very kind of you! I re-did the whole tutorial from scratch, but hit the same problem... it's taken me a while to notice but in the dist generated code, the links to CSS and JS are being generated with an extra / in front of the path... so for example href="/index.c1f971ee.css" when it should be href="index.c1f971ee.css" --- if I just go in and remove the extra /, everything works!! Thank you. On to your other videos now :)
@moisesteixeira
@moisesteixeira 2 жыл бұрын
very good video
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Thank you!
@pusuluri27
@pusuluri27 2 жыл бұрын
with tilde operator not working for import
@TheFentonz
@TheFentonz 2 жыл бұрын
Very nice!
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Thanks!
@harrybgg3364
@harrybgg3364 2 жыл бұрын
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
@pixelrocket66
@pixelrocket66 2 жыл бұрын
What's your project folder name?
@TobiasOpport
@TobiasOpport Жыл бұрын
What do I do when main visual studio code does not recognize the npm command.
@pixelrocket66
@pixelrocket66 Жыл бұрын
Difficult to say without seeing your code base, but it's usually that you are not in the project root. When you try to run that NPM command (npm install, or npm run dev), you need to be in the same folder (almost always your project root) where the package.json file is located.
@TobiasOpport
@TobiasOpport Жыл бұрын
@@pixelrocket66 I only haf imtad yo with your video as a test on my "worklaptop" with obiuntu it works but not on "home laptop" with windows10 new installd and the newest visual studio code these are conectet with github.
@TobiasOpport
@TobiasOpport Жыл бұрын
@@pixelrocket66 thank you for the quick reply
@kevinrittershaus9380
@kevinrittershaus9380 2 жыл бұрын
Suddenly getting an issue with parcel. Followed your direction but when I run dev, I get the error "@parcel/transformer-sass": "^2.3.1" Found this conflicting local requirement. "node-sass": "^7.0.1" Any idea how to resolve this?
@pixelrocket66
@pixelrocket66 2 жыл бұрын
What version of Parcel do you have?
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Also, when you say suddenly, does that mean it used to work then stopped? If so, what did you change on the project (what was the last thing you changed)?
@kevinrittershaus9380
@kevinrittershaus9380 2 жыл бұрын
@@pixelrocket66 it did work before. I'm using version 1.12.5. I created a new project and ran into this issue. I did some research and this seemed to work: "dev": "parcel src/index.html", "build": "parcel build". Thanks for the quick response.
@pixelrocket66
@pixelrocket66 2 жыл бұрын
@@kevinrittershaus9380 Aah, okay, so if you're using Parcel V1, you'll need to also have a sass compiler installed. How you point to your entry point (index) might also be different. Glad you got it working!
@romarmacaraeg661
@romarmacaraeg661 2 жыл бұрын
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?
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Hi Romar, are you using a PHP framework (Laravel, etc)? If so, you may need to add Bootstrap via NPM in a specific sub folder, rather than just from the root. You might also have to look at your import statement. Unlikely that my version will match the file path of your PHP application. Make sure that you have your package.json in the right place and that you can also see the node_modules folder.
@romarmacaraeg661
@romarmacaraeg661 2 жыл бұрын
@@pixelrocket66 No I'm not using any framework. I just want to use this method while learning PHP from my university 😅. Do you think it would work? I followed every steps you made but when I try to replace the index.html with a php one, I always get an error whenever I try to build it Edit: I've figured it out, thanks for that suggestion. So instead of linking the sass file in my php file. I've just link the one's that are in the dist folder lol. But the file namings are kinda awkward. I've tried the solution you've given to a previous comment but it didn't work for or just that I don't know how to use it properly.
@pixelrocket66
@pixelrocket66 2 жыл бұрын
@@romarmacaraeg661 Okay, so in terms of using this as a website, yeah, use what is in your dist folder. the SRC folder is your source folder. In terms of using my setup as a PHP site, I've never used a build tool for a PHP site. I only work with Wordpress or Laravel when using PHP. I guess you could rename the files from .html to .php. But if you're trying to learn, I really think your better option is to build your prototype as HTML, then invest a little more time learning Laravel. If you already know the basics of PHP, and only want to launch a small PHP app, you could learn what you need in a few weeks. Then take the HTML from your prototype and place it in your Laravel app. Have a look at Laravel Daily. It's a fantastic KZbin channel for learning Laravel!
@romarmacaraeg661
@romarmacaraeg661 2 жыл бұрын
@@pixelrocket66 That's actually a great idea for building my PHP projects using this. Thank you so much!
@pixelrocket66
@pixelrocket66 2 жыл бұрын
@@romarmacaraeg661 You're welcome, good luck!
@anonymousme3571
@anonymousme3571 7 ай бұрын
I got this error right off the bat :') What do I do? Tried searching how to install NPM or launch but no luck. zsh: command not found: npm
@pixelrocket66
@pixelrocket66 7 ай бұрын
You need to install node: nodejs.org/en. Make sure you shut down your command line after installing node as well. Good luck!
@anonymousme3571
@anonymousme3571 7 ай бұрын
@@pixelrocket66 Thank you! I'll go ahead and give it a go again :>>
@arturome195
@arturome195 2 жыл бұрын
npm run dev (13:25) doesn't work for me. npm ERR! Missing script: "dev". Did I forget something?
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Are you in the root of your project? Check that you spelled the words correctly and that your package.json is correct.
@arturome195
@arturome195 2 жыл бұрын
@@pixelrocket66 I was in the wrong root :)). Thanks a lot!
@pixelrocket66
@pixelrocket66 2 жыл бұрын
@@arturome195 Cool
@flyingzeroc
@flyingzeroc 2 жыл бұрын
thx pixel👍
@pixelrocket66
@pixelrocket66 2 жыл бұрын
You're welcome
@vw254pt
@vw254pt 2 жыл бұрын
Really good Video. I set up everything as in the video, works great on LocalHost link. Though inside the folder "/dist/" the CSS/JS filenames are randomly generated, e.g. "index.e12db86f.css", "index.e12db86f.css.map", "index.e73767f9.js". HTML filename is correct "index.html". How to make the filenames in "/dist/" more solid (not random) and in subfolders? e.g. "/css/main.css", "/css/main.css.map", "/js/main.js"? I did "npm run dev" and "npm run build"
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Yeah, definitely two downsides to using Parcel for an HTML site. For the subfolders, you need to install an additional plugin. There are a few options out there - here is one of them: www.npmjs.com/package/parcel-plugin-pre-dist. For the file hashing, I think you might be able to disable this as a config option, not sure, but there is also a plugin: www.npmjs.com/package/parcel-namer-without-hash
@vw254pt
@vw254pt 2 жыл бұрын
Thanks Rob, very appreciate your answer and suggestions. Will find the way around with Parcel or with some other tools.
@pixelrocket66
@pixelrocket66 2 жыл бұрын
@@vw254pt If you're looking to build a production HTML site (rather than just looking to build a prototype), then I would suggest using Gulp. I would also recommend using a templating engine (my favourite is Handlebars). Here's a great gulp + handlebars boilerplate, ready to use: github.com/jonwelsh/gulp-hbs-boilerplate
@nadinerichtsfeld37
@nadinerichtsfeld37 Жыл бұрын
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: 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: i would appreciate if anyone has an idea :) thank you!
@pixelrocket66
@pixelrocket66 Жыл бұрын
Hey Nadine, can you put your code up on a github repo and send me the repo url? Don't include the full URL, just the final part after github.com (otherwise Yotube will think it's spam). Happy to have a look for you once I have access to the repo code.
@nadinerichtsfeld37
@nadinerichtsfeld37 Жыл бұрын
@@pixelrocket66 thats very nice! thank you! i have never used github before so i hope its okay, i havent uploaded the "node_modules". the web app wont let me. link is: nadinerichtsfeld/bs-sass-test
@pixelrocket66
@pixelrocket66 Жыл бұрын
So...I get an error about missing @popper/core, which is a package that Bootstrap uses for the tooltip. If you get this same error, then run this in your terminal (in the root of your project): npm i @popperjs/core
@pixelrocket66
@pixelrocket66 Жыл бұрын
That's not related to your issue, but it's an issue related by the looks of it to later versions of Bootstrap. I suspect you are using an earlier version of Bootstrap that doesn't have this issue.
@pixelrocket66
@pixelrocket66 Жыл бұрын
Okay, so the fix for your issue is to add an option to your npm build command. So open up your package.json, line 8 change from this: "build" : "parcel build" to this: "build": "parcel build --public-url ./" You can read more about the public URL option here: en.parceljs.org/cli.html#options Be aware that your JS file is loaded as type="module". This will not work locally unless you run something like live server. You will get a CORS error. It should work correctly on an actual server. If you need to run your dist folder locally, then you will have to open up your compiled index.html and remove the type="module" from your JS import. So find this: and change it to this: Remember that "ae655443" will be unique each time you rebuild your files. Hope that helps!
@user-q7760a
@user-q7760a 2 жыл бұрын
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....
@pixelrocket66
@pixelrocket66 2 жыл бұрын
What version of Parcel are you using? Have you installed any additional packages on your project? (outside of what we use in my video)?
@user-q7760a
@user-q7760a 2 жыл бұрын
ive installed it through npm, so i guess it should be the current one. in package.json: "parcel": "^2.4.1" All i got is sass, parcel bundler, bootstrap. details of installation : installed sass first, then parcel bundler, then tried to go with bootstrap, like this: npm init -y npm install --save-dev sass sass --watch src/scss:dist/css npm install --save-dev parcel than modified package.json: "source": "./src/index.html", "scripts": { "dev": "parcel", "build": "parcel build" . THEN. I tried to run bootstrap from CDN, but after adding the JS bundle , parcel developer server stopped reacting to changes. So ive tried to go with the npm installation of bootstrap, but after installing, parcel developer server reacts super slow....
@pixelrocket66
@pixelrocket66 2 жыл бұрын
@@user-q7760a Okay, so if you're using Parcel V2, you don't need to install a sass compiler. Parcel will handle that. You also don't need to run any NPM watch commands. I would uninstall the sass compiler you installed manually. Terminate any NPM processes running as well for the watch. I assume your index.html is inside your SRC folder, in which case your script commands look fine for me. So try removing your sass compiler package, see what that gives you. If that still doesn't help, place your code on a Github repo and send me the link. I'd be happy to install it on my local machine and see what times I get for sass to recompile.
@user-q7760a
@user-q7760a 2 жыл бұрын
@@pixelrocket66 Thank you for answering. Created a new project, omitting sass compiler. Think the dev server runs bit faster now, but still lagging about 5s. I'm sending a github repo link: bckash/sass-test/tree/master (its without the github part, YT keeps delating my post because of it) would be amazing if you could have a look!
@user-q7760a
@user-q7760a 2 жыл бұрын
@@pixelrocket66 with parcel bundler installed, ive tried two things: 1. I thought that maybe its saas: In Sass instalion guide it is written tha npm install version is bit slower - ive tried installing Sass by downloading the package and adding the folder directory into my PATH (no npm). Then installed bootstrap with npm - same thing, server needs 7 s. to build , after importing bootstrap in scss. 2. Ive tried using bootstrap by downloading package, without npm instalation, - same thing, right after importing in scss, 7 s. lag. How does your setup work? Is it by npm install everything?
@muneeburrehman450
@muneeburrehman450 2 жыл бұрын
npm init not working
@pixelrocket66
@pixelrocket66 2 жыл бұрын
What is the error message?
@ddbbykc4994
@ddbbykc4994 2 жыл бұрын
♥️🙏🏽🙏🏽
@relaxationunderthesky5235
@relaxationunderthesky5235 2 жыл бұрын
i get "npm ERR! Missing script: "dev"
@jerictorres3552
@jerictorres3552 2 жыл бұрын
in your package.json do you have this listed "scripts": { "dev": "parcel", "build": "parcel build" },
@jerictorres3552
@jerictorres3552 2 жыл бұрын
something similar happened to me earlier and its cause I messed up at that step
@pixelrocket66
@pixelrocket66 2 жыл бұрын
@@jerictorres3552 Yeah, make sure your package.json file is correct.
@CrashyTop
@CrashyTop 2 жыл бұрын
To brincando valeu meu primo
@CrashyTop
@CrashyTop 2 жыл бұрын
Ensina os bagulho direto mermao, ensina os bagulho dos treco tudo errado meu primo
@pavlokoval
@pavlokoval 2 жыл бұрын
_variables.scss when I wrote it like this it worked for me: @import "./abstracts/_variables.scss"; Thanks a lot!
@ratchagun
@ratchagun 2 жыл бұрын
Am getting a below message in windows machine. Not able to run the localhost > site@1.0.0 develop > parcel Server running at localhost:1234 Building... Bundling... Packaging & Optimizing... √ Built in 2.13s
@ValShiPhp
@ValShiPhp 2 жыл бұрын
@parcel/transformer-sass: Can't find stylesheet to import. ╷ 7 │ @import "~/bootstrap/scss/functions"; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ src\assets\scss\main.scss 7:9 root stylesheet
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Yeah, this appears to be an issue for many people with the recent Bootstrap changes. I think I'll rerecord this video very soon and place a link to it inside this video's description!
@qorinn
@qorinn 2 жыл бұрын
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";
@qorinn
@qorinn 2 жыл бұрын
for some reason it can only find the path if the main.scss is in the src folder, where index.html is.
@pixelrocket66
@pixelrocket66 2 жыл бұрын
Okay, replace in your import code this: "../node_modules/" with this: "~".
@qorinn
@qorinn 2 жыл бұрын
@@pixelrocket66 that's how I used it first, but it didn't work either. I don't get these npm things, yesterday I couldn't install parcel for like an hour and today it installed for first try (i didn't even restart my pc)
@dispel000
@dispel000 2 жыл бұрын
@@qorinn check your spelling? it wasnt working for me either and then i rewrote the same thing and now it works. turns out i was typing "boostrap" instead of "bootstrap"
Customise Bootstrap's Sass
22:27
Pixel Rocket
Рет қаралды 14 М.
Sass Crash Course 2022
58:51
Pixel Rocket
Рет қаралды 31 М.
Человек паук уже не тот
00:32
Miracle
Рет қаралды 3,8 МЛН
小路飞还不知道他把路飞给擦没有了 #路飞#海贼王
00:32
路飞与唐舞桐
Рет қаралды 74 МЛН
Walking on LEGO Be Like... #shorts #mingweirocks
00:41
mingweirocks
Рет қаралды 6 МЛН
Disrespect or Respect 💔❤️
00:27
Thiago Productions
Рет қаралды 35 МЛН
How to Install Bootstrap with NPM (Best Way)
16:47
ByteGrad
Рет қаралды 55 М.
What is NPM, and why do we need it? | Tutorial for beginners
14:27
Coder Coder
Рет қаралды 326 М.
Install Bootstrap via NPM | 2024
30:25
Pixel Rocket
Рет қаралды 159
Bootstrap 5 Crash Course 2022
2:36:17
Pixel Rocket
Рет қаралды 11 М.
How To Recompile Bootstrap's Sass In VSCode
13:10
Pixel Rocket
Рет қаралды 7 М.
CSS is getting better, but Sass is still relevant
18:42
Kevin Powell
Рет қаралды 31 М.
Accordion in Bootstrap 5 (with dark mode)
24:31
A Designer Who Codes
Рет қаралды 9 М.
Человек паук уже не тот
00:32
Miracle
Рет қаралды 3,8 МЛН