Your voice is perfect. Really relaxing when learning at the same time. Thanks.
@pixelrocket66 Жыл бұрын
You're very welcome!
@manishjha62397 ай бұрын
Only one word for this awesome tutorial about bootstrap install via NPM...Superb Man
@loganmagnuson48132 жыл бұрын
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!
@pixelrocket662 жыл бұрын
Awesome, Logan, really glad it helped you!
@Neisyaz2 жыл бұрын
keep it up man, nice editing + you added chapters which is great
@pixelrocket662 жыл бұрын
Thank you very much!
@kkokoruz11 ай бұрын
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
@coolmifa2 жыл бұрын
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.
@pixelrocket662 жыл бұрын
Thanks Trang!
@roccotis2 жыл бұрын
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!
@pixelrocket662 жыл бұрын
Fantastic! Glad it helped you, Joseph!
@roccotis2 жыл бұрын
@@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...
@pixelrocket662 жыл бұрын
@@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?
@roccotis2 жыл бұрын
@@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
@pixelrocket662 жыл бұрын
@@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 Жыл бұрын
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 Жыл бұрын
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 Жыл бұрын
Everything works fine, except for Dark Mode. data-bs-theme="dark" does nothing, only works with CDN. Anyone knows how to fix this?
@taofeeqomotolani23112 жыл бұрын
Channel is gradually growing😍
@pixelrocket662 жыл бұрын
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 Жыл бұрын
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 Жыл бұрын
Excellent explanation, and very sharp vocabulary. Thanks a lot
@pixelrocket66 Жыл бұрын
You are welcome!
@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?
@TheBassUp2 жыл бұрын
Thanks for the video. You mentioned we have to create a new file to modify a bootstrap sass map, how would that look like?
@pixelrocket662 жыл бұрын
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.
@hallionsixtyfive2 жыл бұрын
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.
@theisaiahcc2 жыл бұрын
For me, the problem was that I had: "main": "./src/index.html" when it should have been: "source": "./src/index.html"
@captured_by_jisan Жыл бұрын
Great Tutorial! Thank You!
@pixelrocket66 Жыл бұрын
Glad it was helpful!
@cobaltdupont25372 жыл бұрын
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
@pixelrocket662 жыл бұрын
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!
@cobaltdupont25372 жыл бұрын
@@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
@davidicusrex2 жыл бұрын
Excellent video, thanks!
@pixelrocket662 жыл бұрын
Glad you liked it!
@dhc2 жыл бұрын
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!
@pixelrocket662 жыл бұрын
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.
@dhc2 жыл бұрын
@@pixelrocket66 Thanks so much for the help. Here is the repo dougcrew/Bootstrap-Boilerplate.git
@pixelrocket662 жыл бұрын
@@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.
@dhc2 жыл бұрын
@@pixelrocket66 That was it!.Thank you for taking the time to reply!
@pixelrocket662 жыл бұрын
@@dhc You're welcome!
@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)
@VjRocker0072 жыл бұрын
Hey bud, Thanks for video guide, it was really helpful and I got everything to work perfectly. Wish the very best for you!
@pixelrocket662 жыл бұрын
Fantastic, glad it helped you!
@kentaasakura8230 Жыл бұрын
Hi everything's working thanks to your tutorial 🙏 But how do I add another map like text color and background color?
@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 Жыл бұрын
@@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 Жыл бұрын
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 Жыл бұрын
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 Жыл бұрын
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 Жыл бұрын
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 Жыл бұрын
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 Жыл бұрын
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 Жыл бұрын
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)
@stevemesser48422 жыл бұрын
Incredibly great tutorial! Thank you!
@pixelrocket662 жыл бұрын
You're very welcome!
@Adventure18442 жыл бұрын
amazing
@pixelrocket662 жыл бұрын
Thank you! Cheers!
@elenadp26862 жыл бұрын
Thank you , I didn't understand, how did you import bootstrap code in js file?
@pixelrocket662 жыл бұрын
Hey Elena, place this code in your main javascript file: import 'bootstrap';
@robbiegeiss70902 жыл бұрын
this was so so helpful, thank you!
@pixelrocket662 жыл бұрын
You're welcome!
@RobertoGalanOL2 жыл бұрын
Great great tutorial!
@pixelrocket662 жыл бұрын
Thank you!
@kirkallen33532 жыл бұрын
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!
@pixelrocket662 жыл бұрын
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.
@kirkallen33532 жыл бұрын
@@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!
@diegovallenilla83622 жыл бұрын
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
@pixelrocket662 жыл бұрын
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.
@diegovallenilla83622 жыл бұрын
@@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.
@rossscondie46153 ай бұрын
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
@pixelrocket663 ай бұрын
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.
@rossscondie46153 ай бұрын
@@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 :)
@moisesteixeira2 жыл бұрын
very good video
@pixelrocket662 жыл бұрын
Thank you!
@pusuluri272 жыл бұрын
with tilde operator not working for import
@TheFentonz2 жыл бұрын
Very nice!
@pixelrocket662 жыл бұрын
Thanks!
@harrybgg33642 жыл бұрын
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
@pixelrocket662 жыл бұрын
What's your project folder name?
@TobiasOpport Жыл бұрын
What do I do when main visual studio code does not recognize the npm command.
@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 Жыл бұрын
@@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 Жыл бұрын
@@pixelrocket66 thank you for the quick reply
@kevinrittershaus93802 жыл бұрын
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?
@pixelrocket662 жыл бұрын
What version of Parcel do you have?
@pixelrocket662 жыл бұрын
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)?
@kevinrittershaus93802 жыл бұрын
@@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.
@pixelrocket662 жыл бұрын
@@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!
@romarmacaraeg6612 жыл бұрын
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?
@pixelrocket662 жыл бұрын
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.
@romarmacaraeg6612 жыл бұрын
@@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.
@pixelrocket662 жыл бұрын
@@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!
@romarmacaraeg6612 жыл бұрын
@@pixelrocket66 That's actually a great idea for building my PHP projects using this. Thank you so much!
@pixelrocket662 жыл бұрын
@@romarmacaraeg661 You're welcome, good luck!
@anonymousme35717 ай бұрын
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
@pixelrocket667 ай бұрын
You need to install node: nodejs.org/en. Make sure you shut down your command line after installing node as well. Good luck!
@anonymousme35717 ай бұрын
@@pixelrocket66 Thank you! I'll go ahead and give it a go again :>>
@arturome1952 жыл бұрын
npm run dev (13:25) doesn't work for me. npm ERR! Missing script: "dev". Did I forget something?
@pixelrocket662 жыл бұрын
Are you in the root of your project? Check that you spelled the words correctly and that your package.json is correct.
@arturome1952 жыл бұрын
@@pixelrocket66 I was in the wrong root :)). Thanks a lot!
@pixelrocket662 жыл бұрын
@@arturome195 Cool
@flyingzeroc2 жыл бұрын
thx pixel👍
@pixelrocket662 жыл бұрын
You're welcome
@vw254pt2 жыл бұрын
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"
@pixelrocket662 жыл бұрын
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
@vw254pt2 жыл бұрын
Thanks Rob, very appreciate your answer and suggestions. Will find the way around with Parcel or with some other tools.
@pixelrocket662 жыл бұрын
@@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 Жыл бұрын
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 Жыл бұрын
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 Жыл бұрын
@@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 Жыл бұрын
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 Жыл бұрын
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 Жыл бұрын
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-q7760a2 жыл бұрын
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....
@pixelrocket662 жыл бұрын
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-q7760a2 жыл бұрын
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....
@pixelrocket662 жыл бұрын
@@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-q7760a2 жыл бұрын
@@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-q7760a2 жыл бұрын
@@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?
@muneeburrehman4502 жыл бұрын
npm init not working
@pixelrocket662 жыл бұрын
What is the error message?
@ddbbykc49942 жыл бұрын
♥️🙏🏽🙏🏽
@relaxationunderthesky52352 жыл бұрын
i get "npm ERR! Missing script: "dev"
@jerictorres35522 жыл бұрын
in your package.json do you have this listed "scripts": { "dev": "parcel", "build": "parcel build" },
@jerictorres35522 жыл бұрын
something similar happened to me earlier and its cause I messed up at that step
@pixelrocket662 жыл бұрын
@@jerictorres3552 Yeah, make sure your package.json file is correct.
@CrashyTop2 жыл бұрын
To brincando valeu meu primo
@CrashyTop2 жыл бұрын
Ensina os bagulho direto mermao, ensina os bagulho dos treco tudo errado meu primo
@pavlokoval2 жыл бұрын
_variables.scss when I wrote it like this it worked for me: @import "./abstracts/_variables.scss"; Thanks a lot!
@ratchagun2 жыл бұрын
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
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!
@qorinn2 жыл бұрын
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";
@qorinn2 жыл бұрын
for some reason it can only find the path if the main.scss is in the src folder, where index.html is.
@pixelrocket662 жыл бұрын
Okay, replace in your import code this: "../node_modules/" with this: "~".
@qorinn2 жыл бұрын
@@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)
@dispel0002 жыл бұрын
@@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"