Stop using an extension to compile Sass

🎓 I'm working on a Sass course! - beyondcss.dev/?O...
🔗 Links
✅ Stephanie's npm script: thinkdobecreate.com/articles/...
✅ NodeJS: nodejs.org
✅ The working Live Sass Compiler extension: marketplace.visualstudio.com/...
✅ Follow Steph on Twitter: / 5t3ph
⚡More Sass content:
✅ Stop using @import, use @use and @forward instead: • Stop using @import wit...
✅ Generate custom props & utility classes with Sass: • Generate custom props ...
✅ Get more organized with Sass partials: • Get your stylesheets m...
✅ Write less code with these Sass mixins: • Write less code with t...
⌚ Timestamps
00:00 - Introduction
00:51 - Don't use the old extension
02:17 - Another problem with the older version of Sass
03:27 - The new extension that works
07:09 - The benefits of using other methods
10:02 - Setting up the npm script
17:02 - Modifying the script for assets and to get it working on Windows
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@Imran-Desk]

Ritwik Dey is a friend of my friend. He has also built live server

[@wayneswildworld]

Legend

[@Imran-Desk]

@@wayneswildworld he is 🙂

[@philome4811]

Elon musk is a friend of my friend. He also build Tesla company.

[@Imran-Desk]

@@philome4811 Ha ha.. funny, you guys are comparing Ritwik with Elon 😅 Gotta tell him that, hell be on cloud nine..

[@kamalsharma2839]

& I am Joe Biden childhood girlfriend. Uff 😀

[@johnsonb8727]

I really appreciated this video! I have already begun using this file structure in my projects with the new Sass @use & @forward folder structure. Also that issue with the live sass compiler was giving me grief for days!! I really appreciate you explaining this in simple terms. Your videos are great

[@MikeHerzog_de]

cancelling node on Mac is `Ctrl-C` as well. `Cmd-C` is "copy to clipboard" ; )

[@KevinPowell]

Thanks!

[@starletscarlet]

ctrl-c, if anyone is interested, dates back as the "cancel" command from back to pre-unix systems, and macOS as well inherits a lot of these control commands from unix terminals in general text editing as well - try doing ctrl-a/e, ctrl-f/b, ctrl-k/d (and probably several other ones I've missed) in a macOS text field

[@FlorianWendelborn]

@@starletscarlet It’s even older than that. They’re control characters from ASCII, designed for printer-based "terminals" that were still programmed with punchcards.

[@starletscarlet]

@@FlorianWendelborn yes, hence "pre unix systems"

[@404ryannotfound]

Awesome Kevin, I'm not great with Sass, but you completely demystified it for me. Going to start using this method from now on.

[@JJW619]

After several trials and errors trying to download SASS, this is the ONLY video that worked. Thank you soooooo much!

[@DominikGuzowski]

I compile SASS by hand!

[@joydey1794]

😂😂

[@youtubevideos5124]

😂

[@TheForcedGamingGroup]

😂😂😂

[@tafm3446]

😂

[@mainamburu8036]

😂😂😂😂😂

[@alvaroprietovideos]

It would be nice to have more videos about NPM, thank you for sharing, I love your content!

[@triteraerlangga7917]

Your face when you hit "npm install" and shows error, priceless... but thanks Kevin! I always compile my SASS file with live SASS compiler, and somehow I have exact same issue like what you had before.. this video is really helpful!

[@rjmunt]

Some of my ancient projects were put together with GUI build tools. A decades later when I want to tweak it I end up just leaving it alone, it's a lot of hassle to reproduce the build environment. Nowadays I get a lot of joy from setting up developer environments and CI/CD automation. Making a change, pushing your branch and having the project build, test and deploy for free ... 🤩 The initial setup of saves so much time in the long run.

[@ThiNguyen-bm5ln]

I want to become a professional backend engineer but I'm stuck with Frontend at the moment and your videos are super helpful and easy to understand. Thanks a ton!

[@AyushGupta-wn6zd]

​@Skuash lmao

[@coreyhansen9711]

In my most recent build, been using node Sass Chokidar for live compiling. Little bit less beefy compiler but used it and changed my run scripts to watch and compile for live updates. Also used npm-run-all as a hacky way run my watch and start scripts at the same time.

[@oguching]

Thanks for the awesome content you put out Kevin.

[@valeriousmonk654]

This is what I needed! life is easier with your videos

[@merymery4839]

Thank you for your css/scss tutorials!

[@wvdheuvel2115]

Great! I used to use npm packages, didn't know about vscode extensions. Extensions look a lot simpler. Will be using this now 👍

[@carbellsarfo]

Excellent video by all standards. I was constantly running into problems when compiling my sass and this for me is my redemption. Thank you very much Kevin

[@oluwaseunajibowo7422]

Please have you by any chance deploy,if yes how did you deploy

[@oluwaseunajibowo7422]

Running into problem when deploying,the css and the asset folder not showing up,need to know the directory to deploy

[@carbellsarfo]

@@oluwaseunajibowo7422 Please what platform are you using to deploy please? is it netlify?

[@carbellsarfo]

@@oluwaseunajibowo7422 Yes please I have been able to deploy a number of websites on netlify. when working in development mode, does the css show? when you deploy, does the html show?

[@oluwaseunajibowo7422]

@@carbellsarfo when I deploy,the html shows,but both the sass folder and the asset doesn't show

[@amraldroubie3127]

yes i notice that when i use @use and not compiled thanks for your great videos🔥

[@progressisbeautiful1541]

Thank you for this wonderful tutorial. I've been struggling with extensions for a while, and there is no annoying terminal window at the bottom when compiling anymore.

[@golden1987]

I had that problem with min() today and had to find another solution. Now I know I need to install new extension. Thanks for video :) Pity, you haven't uploaded it, I don't know, yesterday? :D

[@dragoshjianu]

Hello Kevin You are doing a great job for all of us. I was wondering when the new SASS course will be released? There are some things that I need to put in order in my mind for basic sass. and I just need your explanations for the advanced stuff (functions, mixins etc) Keep up the good work! Cheers!🍻

[@oluwaseunajibowo7422]

After running npm build,which folder did you deploy.

[@neenreva]

Perfect timing for me on this one sir.... I was just running into this issue.

[@neenreva]

Well I was excited to move up to this step. I've tried my best to figure this into a project I am currently working with and have had no luck. Created a test folder and ran through the steps again and same problem. Browser sync renders the HTML but not the CSS. Network tab says 404 on the .css?? Any thoughts? I'm running PC and windows. @Kevin Powell

[@alexanderjprado]

What a helpful resource.

[@AppleGameification]

I ran into this issue literally last night doing the javascript calculator haha luckily I had both live sass and the commandline sass installed

[@dobryden7196]

Thank you! Much needed.

[@andeveloper]

please tell me do you only use node or do you sometimes use the 'watch sass' plugin? thank you, you helped a lot!)

[@jmcbade2960]

Since I use Wordpress a lot, I also now have WP Codebox for code to use with the Wordpress core. Besides all the other nice PHP and JS goodness, SASS is directly supported and the transpiler is built in.

[@kingyertle100]

Thanks for the video!

[@ahmadsalah1721]

Great video very helpful. a video about npm would be great too.

[@dweblinveltz5035]

For everyone else not on Windows, install node on command line: First: install nvm (just look up the command for your operating system), then run this command in terminal/command line: `nvm install node` (or replace node with whatever version of node you want, "node" is an alias for the latest version) That's it.

[@jmcbade2960]

Kevin, thank you for heading me in the right direction. Inadvertently, you exposed me to npm in a fresh way and provided a really useful use case as an example, watching SASS/SCSS files, transpiling them and then copying the output to another folder. Brilliant. The thing is, I don't use VS Code much because I like PHP Storm a lot :) Whenever I see something like this tutorial, I ask myself, how would I do this in PHP Storm. Obviously I am still learning and especially doing things in this IDE, but this practical example allowed me a great way to see how npm is implemented in PHP Storm. Once I got the way to do it understood, I see the great value PHP Storm has for me. I am not saying VS Code is bad, I just want to use PHP Storm as I own a license for it. It's a bit fickle, like creating File Watchers for example, and "geeky" as a coding tool, but the value is there if you get your head around it. I have learned a lot from you in other ways as well and I appreciate your take on how you approach things "web".

[@oluwaseunajibowo7422]

After running npm build,which of the folder did you deploy

[@sahannethsara3134]

Thank you so much❤️‍🔥

[@sonoftroy8572]

Hey Kevin: Cool video about SASS, I wanted to know what changes you would make in the Json file if you're using PHP

[@scicommerce]

Awesome content 🎉 thanks 🙏

[@colinesavy2084]

Super useful video, I kept having problems and errors with sass compiling! Looking forward to your sass course.

[@thomasemerson2134]

Hey Kevin - Great video. Just had a question about if we would need to do the same with a javascript file? Thanks heaps!

[@shahidshafi1227]

Old one was not working for me 👀. Thanks for the suggestion ❤️.

[@alejandropd_1]

First of all, a big THANKYOU !!! Kevin, waiting for the Sass course. Second for those of you who couldn't live watch "watch:assets": "onchange \"/src/assets/**/*\" -- npm run copy:assets", it because it has a "/" at the beggining of the route address, so take it out, should look like this "watch:assets": "onchange \"src/assets/**/*\" -- npm run copy:assets", That all folks, maybe you didn't have this inconvenience, so i wanted to share my discover. Regads !!!

[@oluwaseunajibowo7422]

Please I have problem deploying it, which of the folder to deploy?

[@biopharmc]

Great video as always! What software do you use to make youtube videos? Thanks!

[@stephensayedolo]

I even Subscribe before watching the video. Hope I will be able to install and use sass. I am currently completing the CS50W

[@KevinPowell]

Welcome aboard! Hope you got it working!

[@stephensayedolo]

@@KevinPowell Yes I did but I used windows powershell to some extent

[@yanaiedri]

u can write min in uppercase (MIN(...)) in node scss - and it still work - css props - is not case sensitive

[@Imran-Desk]

Damn was just thinking about this topic and watching you on CSS battle.. and boom I'm here now 😅

[@JimKernix]

Excellent - thanks!

[@mahmoudalhussain9291]

Amazing video as always✌🏼

[@Leafgard]

The video is out for 3 minutes, how can you tell lmao

[@sahannethsara3134]

@@Leafgard ?

[@mahmoudalhussain9291]

@@Leafgard all his videos are amazing thats why i write that comment lol 😆

[@Leafgard]

@@mahmoudalhussain9291 That's true but wait until the end of the video haha

[@masterofhawks]

Great video, I live your work :) But I have one question. I'm using custom PHP CMS with Smarty templates system. So what od tej jest approach to use webpack or grunt-like apps?

[@diakitescylla5974]

Great video !! But Is it possible to use this within react js project?

[@tamantaman]

"npm run sass" lifechanger !

[@marcindomanski5654]

I preffer gulp, because configuration is easier and have much more power, but this config is super nice. Edit: now i see that in this aproach browsersync reload entire page when files (css) is change. In gulp you can inject new css without page reload and this is much better.

[@1337ghomri]

From my understanding Gulp is more oldschool than npm. Where i work now they used to use Gulp, but it has been changed out with npm two years ago. I my self don't know much of the difference between. But there are several hardcore front-end developers accros multiple teams, that has chosen npm as the way to go moving forward.

[@rjmunt]

A lot of people invoke gulp with npm. Gulp is fine, but there's a lot of easier and/or more complete tools available.

[@PavelMarkovic88]

thank you Kevin Im greenhorn and you do magic job for me

[@AbhinavKulshreshtha]

Can we have github link for the project you are showcasing here.? I want to check the folder structure and flow with newer sass @forward rules.

[@nicolasmayorga8288]

Thanks for the video i will keep using the extension but the good one ( i was using the bad one ). 👀 Why not npm ? Because im just working basic projects to do complex projects i prefer with react and part of that environment when you do the npm create app makes a lot easier those things. Great video and thanks ! 👌, would be really appreciatted more content about npm! 😊

[@VinceAggrippino]

As good as I'm sure Stephanie Eckles' package.json file is, I don't like installing and using packages without knowing what they do. I might take some time to check out each of those scripts and dependencies and see what they are/do and decide whether or not to start using them.

[@weixintoo5939]

Hi Kevin, I am new to SASS and I came across this video. I am glad I learned something new today but I am a little bit confused and would like to know the reason why we are not pushing the CSS file (the one inside the public folder generated after running the "npm start" command) to the GitHub repository? What if we want to get CSS files, are we going to copy and use the one inside the Public Folder, as there is clearly no CSS folder inside our src folder? Thank you=)

[@Sebastian-zs8cp]

how do you configure that the style.css comes out here -> assets/css? or where the target is?

[@DevSolution]

I have stopped using Sass myself but great video pointing out the problems with the older toolings for Sass

[@lev_bul]

thank you!

[@wedepohl]

Kevin ... thanks for the great tutorial ... Question and I know it isn't in your CSS/SASS teachings, but do you have some quick hints on how to compile ES6 into ES5 in the npm build environment in a similar manner to how you got SASS working?

[@calvinwilson3617]

If you want to compile scripts into es5 i recommend looking into Webpack, it is essentially a compiler tool where you reference the files and configure what to do with different plugins

[@Baedda666]

I suggest installing Dart on your system and use the native Sass watch instead of the nodejs version. It performs much faster

[@adamkniec9333]

I came to the comments section to see if there is also someone using the dart sass watch. I'm glad I'm not alone :)

[@FlorianWendelborn]

Just be aware that there’s incompatibilities between all versions of sass.

[@iamtharunraj]

I use Vite. It's better than *Parcel* 📦 and probably is the best frontend tool out there. *It's both fast and easy to install!*

[@mattmaloney5988]

You can also just capitalize css function names that conflict with SCSS function names. In the case of your example, use Min() rather than min(). Apologies if you mention this later. I'm not able to watch the whole video right now.

[@merymery4839]

Thank YOU! must test it, that's really great hint.

[@julianrodriguez9832]

Always watch for the changelog in extension or it may ruin your work

[@sexxyrhed]

Hey, this video seems great but do you have something for newbies? I just had my first sass assignment in my web development class and I don’t understand what you did. So far the hardest part of sass is the setup. I followed your video to the best of my ability but you had so much going on.

[@Glow0110]

Can you make a video on how to actually push this to a live site vs doing it locally?

[@judyodiakose6838]

Hello @Kevin, I am a huge fan of your videos and your content, keeping up to the latest CSS features.... I just need to ask, Is this method still valid? Now in 2023 and also, please do a review on Glen Mark's new SCSS compiler extension.

[@DannyH77]

Is it still valid ? Can someone respond to this question that knows the answer

[@judyodiakose6838]

@@DannyH77 Well I'm asking because from another tutorial I got from coder coder's feature on freecodecamp, there are some new changes to sass which this tutorial didn't cover.

[@MultiPitshou]

Thanks for the Tut. I tried it and it works but looks like vendor prefixes are not added

[@franklinexit]

Dumb question but you already had the index.html page made and linked to the styles before you compiled sass to CSS how did you know what it looked like before compiling? How was the link to the style in the scr index.html changed for the public index.html? Did you have to do that or was that included in one of the scripts?

[@clapcell]

I actually went from npm to extensions and life is so much easier. The thing I didn't like about the npm method is that if your node version changes it could create incompatible issues. if a package version changes it could break again and you end up wasting time figuring out which version broke the script. Of course you could never update anything and use as is but then there's no difference from using an extension that never updates.

[@rahimanrahim-5851]

True. Been there done that

[@yersiniapestis6049]

you are the best!

[@2005bgva]

Hello Kevin, thanks for this video. cssnano has a problem it has a dependency of stable@0.1.8 and it is deprecated. I also would like to ask you if all that dependency must be in dependencies or must be moved to devDependencies?

[@Ostap1974]

Good IDE supports generic file watchers that utilize external compilers (including installed using npm) to handle dev builds seamlessly. Extremely convenient.

[@ziadamer7621]

can u please make a videos about JS Because we love the way you EXPLAIN lessons

[@kyriacosstavrinides893]

Note, that some of you may need to install npm manually when you install nodejs, if you're running on linux.

[@phobosdeimos9507]

Using the NPM version of Sass (Dart Sass) is very slow on my computer. It tooks more than 7 seconds to compile the bootstrap sass. Instead I use the standalone dart sass version and using NPM sass-embedded, and the compiling time for the bootstrap sass is less than 1 second.

[@borutskrjanc7462]

Great job Kevin like always. One question do, my img in assets folder dosen't show and i'm new at this so sorry for any inconvenience and thank you again for making top tutorials.

[@MontesCodes]

Not sure if anyone asked, but if the project includes JavaScript does the folder and files extension need to be watched for changes as well? Like copy:js and watch:.js

[@jesperheller]

It is also ctrl + c on Mac:)

[@carbellsarfo]

Hello Kevin this was a success for me when I was running the start command on my pc and working on branch. I committed the changes to my remote branch and decided to take a preview of the changes in netlify but got error message saying failed to deploy. I can't lay a finger on why.

[@Sellwawy]

Awesome!

[@rafaszewczak9675]

Love your hairstyle :)

[@madara8241]

3:11 if someone needs, you can "fix" this by wrapping min function into calc() :|

[@jonasbirkelof3614]

What do you add to the package.json to get it to compile TailwindCSS as well?

[@ThePHPElephant]

I hope you make a video about vitejs.

[@bl7937]

I’ve been using the codekitapp for years for compiling sass along with a few others things it can do.

[@cinallsup]

After all that... even though the css/style.css is linked on the html, css style changes are not happening when i preview in the browser

[@cindymichalowski7922]

I'm having the same issue. Did you ever figure out why that was happening? I've repeated this process, checked console log errors, anything I can do, really. I'm stuck.

[@alexandroscharangionis7602]

Thanks, very informative video! I'm a beginner and I have two questions: 1. What's the difference between build and postbuild? 2. Does this also work when we have a JS file in the src folder, or other type of file? If not, how are we supposed to get it to work?

[@burgersyndrome1474]

Great question, I have my JS file in the Src file and an 404 error occurs

[@Drifters888]

Also interested to learn how to do that! Would be so nice to be able to write my js on multiple files and combine them into one, like the sass to css!

[@rezarahman1782]

Hey man. Did you find any solution of your second question? Because right now I'm facing the same problem.

[@alexandroscharangionis7602]

Hey @Reza Rahman. Well, I kind of did by actually learning Webpack, which is a module bundler who does exactly that and much more. You could watch a Webpack tutorial (FCC has a 2hr one and there are a few more others out here on KZbin), I personally learned it through The Odin Project.

[@elamandeep]

Yeah kevin , you are right . I have tried live sass compiler and you know i cannot use @use and @forward . It supports only old sass syntax . That's why i moved to manual one🙂

[@blessingschilima9885]

Iam failing to use @forward it's saying Errol import stylesheet how do I solve it

[@kevinrittershaus9380]

Could this be used for WordPress development as well?

[@hitradioshow]

Does anybody else use Prepros? It's a GUI that lets you just klick together what you need (SASS compiling, creating CSS/JS-sourcemaps, auto prefixing, CSS/JS minifying, Babel, upload-on-save, image optimization, live preview, …). I've been using it for many years now on all my (professional) projects, and it works like charm for me.

[@theoneandonlyzulu3342]

I've used gulp for years & it's never let me down, super fast with an easy to read config. The only issue I have with it, is the speed of patches, but it's kind of a non-issue.

[@e11world]

Only thing I don't like with Gulp is I still have to update or downgrade plugins and scripts if projects are older than say 6 months. I had an issue recently and spent a day just re-configuring things to work. That's why I think this may work but ultimately I want to stay away from anything node_modules related.

[@amirclev8213]

Thx for the video. I tried this method but I'm having problems with js, I created a js file in assets just to test, it's copying it to the public/assets folder but it doesn't update it when I change the js file. Is there any solution pls?

[@zenitzo]

im taking a sass course on udemy but i feel its a bit outdated. do you have a video on how to install the latest version of sass ? also does the npm node file with ALL the extensions always have to be showing on my project

[@raziburrahman8891]

How to integrate Bootstrap or other vendor css/sass?

[@ChrisWalshZX]

Can this process by used with Visual Studio (Professional)? I don't think VS 2022 has a CTRL+` window.

[@skillzorskillsson8228]

I watched this video when you first released it but i didnt really care too much because my compiler was working just fine. i use sass-autocompile for atom. But now that i am learning grid and learned to use min() function i have started to realize that yeah... sass compilers are really bad. I get error so my code does not compile. And i have to use min() for grid-template-columns so yeah... Now im gonna watch this video once again... :)

[@skillzorskillsson8228]

But to no surprise i get errors when trying to install. Something about that it cannot find postcss and yeah i dont have postcss. But i also did not hear you talk anything about that postcss was a requirement for this

[@skillzorskillsson8228]

Now this error has been fixed. Now there is just one more problem... I can run npm start with no problems. But i cannot run npm build. It says something like unknown command "build" or something

[@omartellez933]

Do I have to do the same process for each new project? I mean I have to install the package.json every time.

[@rebelshadowrm]

Using Vite might be another option. As far as I know you just need to npm install sass and it's already preconfigured and works out of the box.

[@olaot4294]

Hello Kevin @Glenn-Marks :: extension does not work properly , like that sccs file $variables do not complete properly in CSS --var :: only show code.

[@cheekymonkey5973]

Awesome video once again. However I am running into a weird issue. I have a variable file to overwrite bootstrap css. The first time I run npm start and make a color change in the variable file it would instantly show the change in the browser, I make another change and I see no change in the browser and it shows css was complied. Third time I make a change the browser resets and completely ignores the variable file and reverts back to bootstrap css. Not sure what I am doing wrong.

[@afazahamed4851]

When I run "npm start" the style path is wrong inside the "public/index.html" file and the css not working in the browser (Style path was: "sass/style.scss") So I manually edited the "index.html" file in "public" folder to "css/style.css" How to change the style path from "sass/style.scss" to "css/style.css" when compiling?

[@daveyedgar]

Love your videos! I have a question about the script. Is there a way to copy from say a ./src/assets to the ./dist/assets and exclude folders? I tried this but it doesn't work => "copy:assets": "copyfiles -e .src/assets/scss/**/* -e .src/assets/js/**/* -u 1 ./src/assets/**/* ./dist/assets/",

[@skillzorskillsson8228]

I think on the watch:assets it should not be a forwardslash before src. I had some problems with that because i saved my js files in assets and whenever i saved the js file it was never updated in the public folder. It did add the js file in public folder when doing npm start but it didnt update the file in public folder when i saved my js file. But now it's all working after removing that forwardslash