Thanks Kevin, I used to consider all that NPM and NodeJS world something very scary, now when I decided to learn SCSS I ended up learning SCSS + how NPM works and Parcel as a bonus, this video is so educational, thanks a lot Kevin, CSS absolutely became easier to understand thanks to your channel as a whole.
Thanks Kevin. Discovered your channel a few weeks ago and you’ve become my go-to source for CSS and HTML. I’ve been writing HTML and CSS code for nearly 20 years (from even before the ‘table’ era) and I’m continuously amazed at how far things have advanced. Thanks for helping me stay up-to-speed with all the latest developments.
If you're a developer like me who likes to do fewer keystrokes: 'npm install' and 'npm i' are the same thing. Also as Kevin pointed out '--save-dev' and '-D' are the same.
I absolute love Parcel. The feature to add parameters to pictures and let the build convert and resize them is just awesome. Only two downsides: the hashes your can't disable, and the fact that everything is put on root.
Thank you, ironacaly i've been looking at how to use npm and git bash. Nothing was working for me all day and suddenly this video appears. Really thank you
This is such an informative video - you are awesome! Your free responsive design course made responsive design EASY! I don't really have a job now but I'm going to look at your courses and see if I can afford one in an area where I'm lacking - thank you for the videos!
Thanks! Very helpful. The only problem I ran into was installing sass. When I entered sudo npm install -g sass it worked. In hindsight, I would have appended --save-dev to that line as well.
I'm a big fan of Prepros.io. It makes this process even easier: drag your project folder into the Prepros app aaaand... that's it. No more set-up. Sass compiles auto-magically. A bunch of other technologies just work too (like .pug and babel). I'm a gray-haired old-timer and this push towards everything command-line baffles me. This is an industry based around designing intuitive user interfaces, and yet our tools are these cryptic command-line puzzle boxes that just make creating basic Web content harder and harder for the average user.
@@kevyyar My beef isn't really about aesthetics. It's about usability for a new user. Just knowing to type "--help" is hidden. There is no intuitive way to discover new features. Sure you can scroll through the wall-of-text that is a CLI manual, but you'll never have that random discovery of "I wonder what this setting does... I'll just check the box it and try it out... oh, look there's a tooltip telling me EXACTLY what it does! Neato!"
Pretty easy way (in Windows) to open the folder in VSCode is going to the folder you want to open. Then holding Alt and Pressing FSA. That will open the powershell in adminmode. From there you can just type "code ." to open vscode on that path.
LUV this video; I tried Parcel years ago but at that time it required a javascript entry point so it seems much easier now..? This workflow seems so great!
Hi Kevin, I tried following the steps in your video but getting an error pertaining to parcel where it says it can't find the index.html file. The file path and everything is fine. When I install parcel-bundler, it says it has some 23 vulnerabilities and an audit fix --force didn't work either :(
if you got this problem sass : The term 'sass' is not recognized as the name of a cmdle Run this in your terminal Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
`--save-dev` is adding only dev dependency. when you don't have `--save-dev`, it will add the dependency to the package.json anyway. but dev dependency will not be installed in production.
Live-sass compiler is unsupported and has not been updated in the last 3 years. This means newer SASS features like @use fail in live compiler. Kevin's new video that shows how easy it is to use the SASS npm module with parcel is most welcome.
Hey great video, just wondering how much of this do I have to repeat when I start a new project after going through all this? Is there a shortcut? Maybe with a saved template or something?
Just use a vscode Sass compiler. All this npm stuff is confusing and overloads your computer. There is no way I am downloading all these files just to use Sass. At this point, just write vanilla CSS lol
I was getting this: Error: Cannot find module sass. It was preventing the execution of the scripts. Then I noticed that in my folder structure name on windows I had the character "&" as in "HTML & CSS". I removed the character "&" and now it works. Just in case anybody else is a noob like me and has this problem. Thanks Kevin!
Hi Kevin, great video as always, but I have a question... is there any way to have the css auto compiled on save and have a minified copy saved at the same time?
I remember having problems with the npm command sass --watch src/scss, so I skipped that and just install parcel and ran npm run dev - worked like a charm. I didn't want to install SASS globally because the console error sass: command not found. Also, parcel-bundler is depreicated so you would want to do npm i parcel -D.
If ur watching this in 2023 by any chance parcel-bundler is no longer supported. They changed to .v2 which is simply called parcel. Run: npm i -D parcel
I think if you use parcel you don't need to install sass and run watch, just link to the scss-file instead of the css-file and parcel will automatically do all that for you.
I love your videos! I'm having trouble getting the node.js part to work. I've installed it and tried finding a tutorial on how to correctly install it and it just won't finish installing. I keep seeing this on the terminal: npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + npm init + ~~~ + CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException Could you please help? I've been switching from @import to @forward and @use, but I can't move forward without it. Thanks a lot, your videos have helped me tons.
I've been wondering....is there any benefit to using npm instead of vs code extension live sass compiler for compiling my sass? I'm quite new to web dev and am wondering if npm is just good to start practicing with as it will allow me to use other build features in the future?? Such as Parcel.
I have the exact same question. This seems like a lot of work whereas the vs code extension is much easier. I'm guessing there's some sort of js advantage or tracking other dev dependencies that maybe wasn't covered?
@@welling1 Learn it this way... then you will learn right away the benefits of the optimized files that will end up in your Dist folder - the vscode sass compiler won't do the optimizing.
Hi should we worry about the errors : npm install parcel-bundler --save-dev then I used npm audit fix --force, but the errors are still there? Or should I search for something in it's place? Thanks for the awesome videos , your quality of teaching is amazing, thank you :)
You can also install npm-completion which enabled npm autocompletion in Powershell: 'Install-Module -Name npm-completion'. And then edit your Powershell user-config: 'code $profile' - to open posh config in VSCode. Add line 'Import-Module npm-completion' to run npm autocompletion every time you open a Powershell terminal.
Found a better npm autocompletion module to 'npm-completion' called 'NPMTabCompletion' getting this to work is a bit more difficult: 1. Install-Module NPMTabCompletion 2. Install-Module TabExpansionPlusPlus 3. code $profile (or chosen editor, eg. notepad $profile) 4. Add lines: Import-Module TabExpansionPlusPlus Import-Module NPMTabCompletion To remove / uninstall 'npm-completion' run: 1. Uninstall-Module npm-completion 2. Remove line: 'Import-Module npm-completion' from your user-profile (= $profile)
very helpful and informative video! thanks!! The only thing is I could not manage to run parcel-bundler but instead I did it with parcel. Do you guys know where the difference is?
I’m stuck at -watch step 7:40 anyone know why it would say it doesn’t know what “sass” means? It’s on my package-lock file. Tried installing it again and adding to devDependancies and script manually too. It’s there as a file in node_modules. And I’m stuck. If I figure it out I’ll come edit this comment with whatever the error is
Awesome tutorial as I'm switching over from CSS to SCSS . Was following along until a question/doubt creeped up...do I have to type in npm install sass --save-dev even if I have already Ruby Sass 3.7.4 installed in my PC??? Still wrapping my head around the amount of changes since the last time I coded HTML and CSS (aprox. 7 years ago)
First thank you for the content. Is parcel replacing gulp? Can you setup gulp task and process in parcel? Maybe you can create videos outlining gulp vs parcel? Thanks in advance!
same for me :( whatever i put in HTML showed up in browser, but whatever I write in scss copy in css ( the background, or color, font-size or whatever) the change is not showing Kevin Help :)
When I type: sass --watch src/scss:dist/css 7:47 I get: command not found: sass I did include this command just like in the video: npm install sass --save-dev not sure what is going on. npm -v 8.19.2
thank you thank you!! this was really helpful! ok now I have a question. if I wanna include bootstrap or something like and want to theme it according to my need how can i include that in this process?
I am trying to make sense of all this. Is the reason to install parcel to give me the ability to have live server reload capabilities in case I’m using a web editor without the feature of live server like on VS code? Thanks in advance, ur vids are a great help.
He Kev , thnx for the great video's ! Although I do get Sass , i have run into a few problems mainly because of all the compilers and packages that are out there. So my question is , is this Parcel the way to go right now ? (2021) I restarted learning SASS 4 times , because in the tutorials they were using old compilers or deprecated syntax. Anyways looking forward to your sass course this year , hopefully for once it's shows me how to get this done.
Parcel is fine. I looked at it here because it's so easy. But it depends on the project. You could get it working with gulp, parcel, snowpack, webpack, or many others. In general I'd avoid the extensions. I used to use them in my videos too, but if the person using it stops supporting it, then it's dead. If you can set things up with Parcel, you can probably figure out gulp, or something else later on. The tooling shouldn't matter too much as long as you're using the dart sass. There is a lot of outdated stuff, like you said, which is why I'm working on getting more content out :) Also, you could go with how I did things at the very, very start if you'd like as well, and not rely on any other build tools. I might make a video looking at how to write npm scripts, because then you can set it all up on your own, with all the exact tools that you want.
@@KevinPowell excellent! I made a playground today and after watching this and your other video on Sass combined with an other video from someone else i got it to work and there were a few AHA moments so for the moment i'm happy and i'll patiently wait for more on this subject :) thnx for great response, cu soon!
Hi Kevin. I like your videos, nice ideas and tips :). I just learned SASS this week. I've been using VS Code Live Compiler but it has some problems and this looks like really nice replacement. I watched your video about SASS and you were using @import rule but when I checked SASS Documentation I found this: "The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead." Maybe you could make video about it? :) It seems like there is not much about it on YT.
If you for some reason after installing sass with 'npm install -g sass' get an error on the command 'sass -watch src/scss:dist/css' telling you sass is not digitally signed you temporarely disabled this by typing 'Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass' and then the command will work.
So I watched these videos in reverse order. Let's say I wanted to have this setup for my next projects, using @use and @forward - toy said live sass compiler doesn't support those I would have to do the nom install sass again ?
Hey Kevin, Hope you are doing fine just want to ask you i it important to install node and sass on to our computer or now it can be done by only the vs code extension live SASS compiler??? Please do answer. Thanks.
Thanks for the terrific content Kevin, you are my "go to" for css/sass/design knowledge! So my question is: Have you managed to get Parcel to actually add vendor prefixes? I've been struggling with this (its become my impossible dream!). Does Parcel only do this for the build process (this would make sense but my dist folder never seems to have the autoprefixed vendor prefixes in the generated css file - even when I run npm run build).
One thing to watch out for is, we don't need many prefixes anymore. Sometimes you think it's going to be full of them, but really, they aren't as common as they used to be. You can add a config file to have it look at a bigger range of files though.
Hi Kevin, could you please update this video with Parcel V2? The parcel-bundler package being freshly deprecated, I can't find a way to update the scripts with the new npm package: parcel version 2.0.0-beta.2... Thanks a lot for your help and your always useful content!
I got the error "sass : The term 'sass' is not recognized as the name of a cmdlet, function, script file, or operable program." - I added npx before the command sass --watch src/scss:dist/css and it worked
@@teddavex2540 you people are awesome. That error prompt was annoying the hell out of me. After seaching the comments. I found this and tried it. It worked👏
I'm trying to figure out what do to with the compiled Parcel files in the dev folder... whats the next step from there? How do you get them ready for deployment?
If you see sass: command not found.
Run this line of code first.
npm install -g sass
Thanks! Completely brain farted on that since I'd had it installed for awhile now
You can also use locally installed dependencies:
npx sass --watch src/scss:dist/css
@@roman.kamlykov that’s one of the reasons why I prefer Yarn, you can run local executables just by running “yarn run”.
HERO! you've saved me from a cortisol overdose... :)
@@29Manuu I'm glad to be able to help. Hope you enjoy the course :)
Thanks Kevin, I used to consider all that NPM and NodeJS world something very scary, now when I decided to learn SCSS I ended up learning SCSS + how NPM works and Parcel as a bonus, this video is so educational, thanks a lot Kevin, CSS absolutely became easier to understand thanks to your channel as a whole.
Thanks Kevin. Discovered your channel a few weeks ago and you’ve become my go-to source for CSS and HTML. I’ve been writing HTML and CSS code for nearly 20 years (from even before the ‘table’ era) and I’m continuously amazed at how far things have advanced. Thanks for helping me stay up-to-speed with all the latest developments.
If you're a developer like me who likes to do fewer keystrokes: 'npm install' and 'npm i' are the same thing. Also as Kevin pointed out '--save-dev' and '-D' are the same.
Thank you so much Kevin, took a break and when I came back Sass was a whole new machine. This helped recap and learn something new!
After numerous tries, thank you Kevin, for making such a neat and concise video. God bless you (amen)
I absolute love Parcel. The feature to add parameters to pictures and let the build convert and resize them is just awesome. Only two downsides: the hashes your can't disable, and the fact that everything is put on root.
Thank you, ironacaly i've been looking at how to use npm and git bash. Nothing was working for me all day and suddenly this video appears. Really thank you
This is such an informative video - you are awesome! Your free responsive design course made responsive design EASY! I don't really have a job now but I'm going to look at your courses and see if I can afford one in an area where I'm lacking - thank you for the videos!
Can't express how much happier this video made me! Thank you so much!
Video request: Gulp v4 + Dart Sass (for folks working with a traditional CMS architecture)
As usual, really fantastic content. Keep up the great work!
I loved seeing my 1st sass working now
you explain npm sass gitignore parcel-bundler... in only 17 minutes. great job!
Man your videos are AMAZING!!!!
Great tutorial, Kevin thank you. Thanks also to 676005a, I was getting 'sass: command not found' and used 'sudo npm install -g sass' to get started.
Thank you , that comment fixed my issue as well :-)
You are the best Kevin. You made it so easy for me to set it up! Thanks a ton!
thanks, Kevin Powell, beautiful and fast way
Thank you so much mate :) was looking for this as I have just started learning SASS 😀😀
Parcel is my go to for vanilla HTML/JS/CSS projects. 👍
Works perfect with typescript as well, it has types for tsx and jsx at least in Parcel 2, try it out
Thanks! Very helpful. The only problem I ran into was installing sass. When I entered sudo npm install -g sass it worked. In hindsight, I would have appended --save-dev to that line as well.
Had been using gulp till now and install a couple of other dependencies for a different task, good to learn parcel does similar things.
Thank you so much Kevin. This allows us to use min and max in scss.
Awesome background lights !!
Your channel is great !!! really appreciate your help thank you
Great stuff Kevin. 👍
I'm a big fan of Prepros.io. It makes this process even easier: drag your project folder into the Prepros app aaaand... that's it. No more set-up. Sass compiles auto-magically. A bunch of other technologies just work too (like .pug and babel). I'm a gray-haired old-timer and this push towards everything command-line baffles me. This is an industry based around designing intuitive user interfaces, and yet our tools are these cryptic command-line puzzle boxes that just make creating basic Web content harder and harder for the average user.
I respectfully disagree. UI is pretty but CLI is much more effective. But to each its own though right.
@@kevyyar My beef isn't really about aesthetics. It's about usability for a new user. Just knowing to type "--help" is hidden. There is no intuitive way to discover new features. Sure you can scroll through the wall-of-text that is a CLI manual, but you'll never have that random discovery of "I wonder what this setting does... I'll just check the box it and try it out... oh, look there's a tooltip telling me EXACTLY what it does! Neato!"
I'm a giant fan of Prepros as well and use it all the time :D
@Kevin Powell Thank You ❤
FYI, parcel-bundler is no longer supported. Install v2 instead `npm install parcel --save-dev `
Pretty easy way (in Windows) to open the folder in VSCode is going to the folder you want to open. Then holding Alt and Pressing FSA. That will open the powershell in adminmode. From there you can just type "code ." to open vscode on that path.
Thank you for sharing your knowledge!
You always tell us very interesting things ;)
Dude I love for making this video.
Another great and helpful video!
Thanks Kevin! This is perfectly what I need!
LUV this video; I tried Parcel years ago but at that time it required a javascript entry point so it seems much easier now..? This workflow seems so great!
Hi Kevin, I tried following the steps in your video but getting an error pertaining to parcel where it says it can't find the index.html file. The file path and everything is fine.
When I install parcel-bundler, it says it has some 23 vulnerabilities and an audit fix --force didn't work either :(
Great tutorial! simple and fast. Thanks
if you got this problem
sass : The term 'sass' is not recognized as the name of a cmdle
Run this in your terminal
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser
`--save-dev` is adding only dev dependency. when you don't have `--save-dev`, it will add the dependency to the package.json anyway. but dev dependency will not be installed in production.
Hot damn am I early.
Good time to tell Kevin his video's are the GOAT
So interesting... thank you Kevin.
Great video man! I'm loving Parcel so far. I used to use Gulp, but no more
Awesome, glad that you're enjoying it!
Thank you for your tutorial. It solved my problem.
I had tried this method as live-sass compiler give problem with grid-template-column, this method save the day along with live-server on vscode.
Live-sass compiler is unsupported and has not been updated in the last 3 years. This means newer SASS features like @use fail in live compiler. Kevin's new video that shows how easy it is to use the SASS npm module with parcel is most welcome.
Hey great video, just wondering how much of this do I have to repeat when I start a new project after going through all this? Is there a shortcut? Maybe with a saved template or something?
Just use a vscode Sass compiler. All this npm stuff is confusing and overloads your computer. There is no way I am downloading all these files just to use Sass. At this point, just write vanilla CSS lol
That's a fantastic shirt!
Thanks!
Thanks soo much Kevin
I was getting this: Error: Cannot find module sass. It was preventing the execution of the scripts.
Then I noticed that in my folder structure name on windows I had the character "&" as in "HTML & CSS".
I removed the character "&" and now it works.
Just in case anybody else is a noob like me and has this problem.
Thanks Kevin!
Hi Kevin. Can you please make a tutorial on PostCSS and also suggest best CSS writing approach between SASS and PostCSS. Thank you.
YES I totally second this request!
Liking it like always... I might run a --save-Kev In -heart.... Thanks man.
To clear the terminal (any terminal, not just the one in VS code), you can press Ctrl + L instead of typing "clear"
Hi Kevin, great video as always, but I have a question... is there any way to have the css auto compiled on save and have a minified copy saved at the same time?
Can you show what actually goes up to the server after you finish making your webpage?
Best teacher 👍👍❤️
I remember having problems with the npm command sass --watch src/scss, so I skipped that and just install parcel and ran npm run dev - worked like a charm. I didn't want to install SASS globally because the console error sass: command not found. Also, parcel-bundler is depreicated so you would want to do npm i parcel -D.
If ur watching this in 2023 by any chance parcel-bundler is no longer supported. They changed to .v2 which is simply called parcel.
Run: npm i -D parcel
I think if you use parcel you don't need to install sass and run watch, just link to the scss-file instead of the css-file and parcel will automatically do all that for you.
The option isn't available on Mac OS to open folder in VSCode from a Finder contextual menu. I used automator and made a quick action to do so.
Hi Kevin, should we do all these steps each and every time when we create a site and use parcel?
Just save it on git, next project you git clone the repo, launch npm install and you're set
I love your videos! I'm having trouble getting the node.js part to work. I've installed it and tried finding a tutorial on how to correctly install it and it just won't finish installing. I keep seeing this on the terminal:
npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program.
Check the spelling of the name, or if a path was included, verify that the path is correct and try again.
At line:1 char:1
+ npm init
+ ~~~
+ CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
Could you please help? I've been switching from @import to @forward and @use, but I can't move forward without it. Thanks a lot, your videos have helped me tons.
I had the same problem. I solved it by changing the default execution policy from restricted to unrestricted:
Set-ExecutionPolicy unrestricted
Thank you very much! this is very useful!
Some person must have thought the dislike button was the download button ;) Awesome videos Kevin !!
Do you have to use "npm install sass --save dev" with every new project?
Ok on unbuntu linux got an error.
Installing sass locally doesn't work.
sudo npm i -g sass
then you can run sass --watch src/scss:dist/css
I've been wondering....is there any benefit to using npm instead of vs code extension live sass compiler for compiling my sass? I'm quite new to web dev and am wondering if npm is just good to start practicing with as it will allow me to use other build features in the future?? Such as Parcel.
I have the exact same question. This seems like a lot of work whereas the vs code extension is much easier. I'm guessing there's some sort of js advantage or tracking other dev dependencies that maybe wasn't covered?
@@welling1 Learn it this way... then you will learn right away the benefits of the optimized files that will end up in your Dist folder - the vscode sass compiler won't do the optimizing.
Hi should we worry about the errors : npm install parcel-bundler --save-dev then I used npm audit fix --force, but the errors are still there? Or should I search for something in it's place? Thanks for the awesome videos , your quality of teaching is amazing, thank you :)
Hey! do you have a SASS course or you plan to have one in the near future?
You can also install npm-completion which enabled npm autocompletion in Powershell: 'Install-Module -Name npm-completion'. And then edit your Powershell user-config: 'code $profile' - to open posh config in VSCode. Add line 'Import-Module npm-completion' to run npm autocompletion every time you open a Powershell terminal.
Found a better npm autocompletion module to 'npm-completion' called 'NPMTabCompletion' getting this to work is a bit more difficult:
1. Install-Module NPMTabCompletion
2. Install-Module TabExpansionPlusPlus
3. code $profile (or chosen editor, eg. notepad $profile)
4. Add lines:
Import-Module TabExpansionPlusPlus
Import-Module NPMTabCompletion
To remove / uninstall 'npm-completion' run:
1. Uninstall-Module npm-completion
2. Remove line: 'Import-Module npm-completion' from your user-profile (= $profile)
very helpful and informative video! thanks!! The only thing is I could not manage to run parcel-bundler but instead I did it with parcel. Do you guys know where the difference is?
The folder distribution doesn't shown and when I put sass --watch src/scss:dist/css ==> say error... Why please anyone help me ?
Thank you!
I’m stuck at -watch step 7:40 anyone know why it would say it doesn’t know what “sass” means? It’s on my package-lock file. Tried installing it again and adding to devDependancies and script manually too. It’s there as a file in node_modules. And I’m stuck. If I figure it out I’ll come edit this comment with whatever the error is
Awesome tutorial as I'm switching over from CSS to SCSS .
Was following along until a question/doubt creeped up...do I have to type in npm install sass --save-dev even if I have already Ruby Sass 3.7.4 installed in my PC???
Still wrapping my head around the amount of changes since the last time I coded HTML and CSS (aprox. 7 years ago)
More about Sass :)
Hey, Kevin thanks for the tutorial. However, what if I need more than one html files in a project. That case what should I do to link them
First thank you for the content.
Is parcel replacing gulp? Can you setup gulp task and process in parcel?
Maybe you can create videos outlining gulp vs parcel?
Thanks in advance!
Thnks Kevin :)
Than you a lot 🙏
Hey Kevin how can I compile several scss files into several css files, and not only in one css file??
my sass compiles but it doesnt reload the page on save. it works when im adding html but when im editing sass files, it doesnt work.
same for me :(
whatever i put in HTML showed up in browser, but whatever I write in scss copy in css ( the background, or color, font-size or whatever) the change is not showing
Kevin Help :)
Try using 'parcel' instead of 'parcel-bundler', it's their new version that was just released 4 months ago
When I type: sass --watch src/scss:dist/css
7:47 I get: command not found: sass
I did include this command just like in the video: npm install sass --save-dev
not sure what is going on.
npm -v
8.19.2
Snowpack next?
thank you thank you!! this was really helpful! ok now I have a question. if I wanna include bootstrap or something like and want to theme it according to my need how can i include that in this process?
I am trying to make sense of all this. Is the reason to install parcel to give me the ability to have live server reload capabilities in case I’m using a web editor without the feature of live server like on VS code? Thanks in advance, ur vids are a great help.
He Kev , thnx for the great video's ! Although I do get Sass , i have run into a few problems mainly because of all the compilers and packages that are out there. So my question is , is this Parcel the way to go right now ? (2021) I restarted learning SASS 4 times , because in the tutorials they were using old compilers or deprecated syntax. Anyways looking forward to your sass course this year , hopefully for once it's shows me how to get this done.
Parcel is fine. I looked at it here because it's so easy. But it depends on the project. You could get it working with gulp, parcel, snowpack, webpack, or many others. In general I'd avoid the extensions. I used to use them in my videos too, but if the person using it stops supporting it, then it's dead. If you can set things up with Parcel, you can probably figure out gulp, or something else later on. The tooling shouldn't matter too much as long as you're using the dart sass. There is a lot of outdated stuff, like you said, which is why I'm working on getting more content out :)
Also, you could go with how I did things at the very, very start if you'd like as well, and not rely on any other build tools. I might make a video looking at how to write npm scripts, because then you can set it all up on your own, with all the exact tools that you want.
@@KevinPowell excellent! I made a playground today and after watching this and your other video on Sass combined with an other video from someone else i got it to work and there were a few AHA moments so for the moment i'm happy and i'll patiently wait for more on this subject :) thnx for great response, cu soon!
very useful ,thank you!
Thanks so much!
Hi Kevin. I like your videos, nice ideas and tips :). I just learned SASS this week. I've been using VS Code Live Compiler but it has some problems and this looks like really nice replacement. I watched your video about SASS and you were using @import rule but when I checked SASS Documentation I found this: "The Sass team discourages the continued use of the @import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the @use rule instead." Maybe you could make video about it? :) It seems like there is not much about it on YT.
I also add the dist and .cache folders to .gitignore. Basically anything that’s dynamically generated.
Hi kevin. Why not use the Live sass server extention on vscode?
If you for some reason after installing sass with 'npm install -g sass' get an error on the command 'sass -watch src/scss:dist/css' telling you sass is not digitally signed you temporarely disabled this by typing 'Set-ExecutionPolicy -Scope Process -ExecutionPolicy Bypass' and then the command will work.
So I watched these videos in reverse order.
Let's say I wanted to have this setup for my next projects, using @use and @forward - toy said live sass compiler doesn't support those
I would have to do the nom install sass again ?
Hey Kevin, Hope you are doing fine just want to ask you i it important to install node and sass on to our computer or now it can be done by only the vs code extension live SASS compiler???
Please do answer.
Thanks.
That was AAAAAAAAAAWWWWWWWWWWWSSSSSSSSSSSOOOOOOOOOOMMMMMMMMMEEEEEEEEEEEEE
really helpful
Hello Kevin! I like your tutorials and i would like to know if you have a beginner tutorial about Sass ?
I'm working on a few that should be out within a month or so :)
Thanks for the terrific content Kevin, you are my "go to" for css/sass/design knowledge!
So my question is:
Have you managed to get Parcel to actually add vendor prefixes? I've been struggling with this (its become my impossible dream!). Does Parcel only do this for the build process (this would make sense but my dist folder never seems to have the autoprefixed vendor prefixes in the generated css file - even when I run npm run build).
One thing to watch out for is, we don't need many prefixes anymore. Sometimes you think it's going to be full of them, but really, they aren't as common as they used to be. You can add a config file to have it look at a bigger range of files though.
Hi Kevin, could you please update this video with Parcel V2? The parcel-bundler package being freshly deprecated, I can't find a way to update the scripts with the new npm package: parcel version 2.0.0-beta.2... Thanks a lot for your help and your always useful content!
I got the error "sass : The term 'sass' is not recognized as the name of a cmdlet, function, script file, or
operable program." - I added npx before the command sass --watch src/scss:dist/css and it worked
tks for that Jim - your solution worked for me
@@teddavex2540 you people are awesome. That error prompt was annoying the hell out of me. After seaching the comments. I found this and tried it. It worked👏
I'm trying to figure out what do to with the compiled Parcel files in the dev folder... whats the next step from there? How do you get them ready for deployment?
which index.html file is being built dist or scr
kevin powell gang
does @ forward and @use work with parcel out of the box? because i think I'm having problems with that