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
@@starletscarlet It’s even older than that. They’re control characters from ASCII, designed for printer-based "terminals" that were still programmed with punchcards.
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!
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!
I really like SASS, and this technique has allowed me to learn it by doing. I have taken several tutorials that use HTML & CSS, and tried to redo the CSS in them by using SASS, partials, variables, mixing and so forth. It’s fun to try to determine how to fix problems that occur. I’ve learned a lot. I can just set up an src file with an index.html , sass directory, an assets directory with an images directory and re-use the generated node_modules file, and I’m off to the races. Thanks for the video!
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
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 !!!
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.
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 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?
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
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.
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.
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.
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.
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
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.
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
I still just write my css and don't know why I'd want sass in the first place. Though I'm building within WordPress using oxygen builder and only takes css anyway
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.
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?
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 RUclips), I personally learned it through The Odin Project.
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?
I'm still a bit confused about the src part. You said that we should create those folders, which I did, but you didn't say anything specific about what to put in them. Later you mentioned that the start script was copying things you had in your src folder. The script did NOT create the css folder or the style.css file for me. You showed your style.css and said it copied things from the src folder. This is where I am stuck. Can you please point me to more information. I'm old school. I learned basic on an IBM 286 with a floppy drive and no hard drive but I've spent most of my career doing infrastructure, architecture, and ITSM work. I'm transitioning back to programming as a semi-retirement trade. It's amazing how much more there is to deal with now but at least I don't have to write bubble sorts. I always enjoy your videos as they get right to the heart of things without too many unnecessary details, but I'm at a loss with the src folder. I'm ultimately using bootstrap to build static pages integrated with a wordpress site which also relies on bootstrap so my initial use for sass is to customize bootstrap. If you could touch on that in your upcoming course that would be great.
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.
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.
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?
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
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=)
But how do i run Nodemon in conjuction with this? I get errors,and should i set my express backend to listen to the same port? I cant get this to work together.
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.
Thank you Kevin! But my CSS doesn't work. I think it's a problem with linking it. The html is in src/ and sass too but the css is in public/. My questions are: - Do I link my CSS directly from public/css/ ? - Git doesn't track public/. How would my CSS work when I push my code to Git and host with GitHub pages or Netlify?
For the link, we're focused on the `public` folder, so you should just be able to have the link look for `css/style.css` (or whatever you called your file). As for hosting it, Netlify will run any build command you give it, so you can tell it that the site is in the `public` folder, and to run `npm run build` to build the site.
When I first run npm start, no public folder is created and the browser shows an error: Cannot GET / Also in the terminal output I see: > project@0.1.0 watch:sass /Users/john/Sites/SASS_CSS_Training > sass --no-source-map --watch src/sass:public/css Error reading src/sass: no such file or directory. The src folder is there in the project. Also, the output to style.css has been updated with: /# sourceMappingURL=style.css.map/ but none of the styles defined in style.scss have been created in the style.css
Why do we have to copy index.html, style.css etc though? Didn't quite get it. What if I don't need this "public" folder and I just want these scripts to be a better version of LiveSassCompiler?
You could clean things up and do that for sure. Delete the lines you don't want, change the output path for the CSS file and you're good to go. Most modern approaches do take this type of structure though. We can quickly compile things while in dev mode, and run some extra things for production, like minification and file optimizations.
@@goodnessdavid6583 I kinda did, but then just continued using LSC :) To use the method from the video not creating unnecessary folders and files you just have to edit config file shown in video. Remove lines you don't need where script copies files you don't want to copy. I tried doing that, but didn't manage to :( So I came back to using LSC plugin again. Didn't have much time back then though (had to finish the project I was working on), I'm sure it's not that difficult if you really want to use the method from video. Good luck :)
I have my HTML and SASS changes from the src folder making it to the public folder, but I do no see the CSS changes on my localhost page, onnly my HTML changes. I have style.scss in a sass folder in my src folder. Anyone know why this would be happening?
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.
13:50 is the reason I stayed away from this workflow for years and then no easy way to tell adobe CC app to ignore node_modules folder which filled my 350,000 file limit so I'm on the look for a better simpler solution similar to scout-app or Prepros but with ability to auto copy fonts, minify files, convert imgs to webp and so on.. I have that with gulp now but any project that is few months old will throw errors and I have to spend hours debugging while I should be scssing lol
I dont know what seems to be the problem, but 'watch:html' script woulldnt run correctly and copy my html to public folder when written as is, with *.html ( "watch:html": "onchange \"src/*.html\" -- npm run copy:html" ), For some reason only works like so - "watch:html": "onchange \"src/index.html\" -- npm run copy:html",
So I can’t send an image but it says ERR failed at the project@0.1.0 start script. This is probably not a problem with non. There is likely additional logging output above
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?
I tried to build a website using this method, when i try to add my js through tag I get a GET error 404 on the console. IAnyone know why my JS is not loading properly?
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.
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.
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!🍻
Hi Kevin! How to make all the scss stylesheets compile to one main.css stylesheet in the public folder? I have one main.scss stylesheet into which I import all other scss files. Now all the stylesheet files are compiled in the public folder: main.css, reset.css and so on.
npm downloaded to my simple html scss project node_modules folder that contains 13000 elements is heavy af : ( Why do I need to go through the hell in order to compile simple project?!
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
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/",
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 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.
Hello. I'm just seeing this video in 2023 and you uploaded it about a year ago... Is it still a valid means of compiling scss or are you bring out an update version of this video. Lastly, I have seen a lot of tutorials with scss and they use mostly gulp... Which one gives the best results?
There is something that bugs me a little bit, does that mean that I no longer need the live server extension neither, besides the live sass compiler? I have been working on a project from an old course that I bought a long time that was using node-sass and now that everything is deprecated i'm trying to figure this new updates to SASS. Thanks so much Kevin, your videos have been a live saver so far.
I mean, I think I did "npm install live-server" as well as part of the devdependencies updates is that the reason or the way you show should get me up an running without live-server?!
Everything worked out fine, except when I try to link between pages, I have an index HTML with two options, English or Spanish, each one is linked to an other HTML, but when I try to get there it says: "Cannot GET /src/html/home.html" can someone please help me out, I did everything as kev explained, and everything else is working, but I just dont know why that is happening
![I.N "HALLUCINATION" | [Stray Kids : SKZ-PLAYER]](http://i.ytimg.com/vi/n5B5q1Hwt_U/mqdefault.jpg)
Ritwik Dey is a friend of my friend. He has also built live server
Legend
@@wayneswildworld he is 🙂
Elon musk is a friend of my friend. He also build Tesla company.
@@philome4811 Ha ha.. funny, you guys are comparing Ritwik with Elon 😅 Gotta tell him that, hell be on cloud nine..
& I am Joe Biden childhood girlfriend. Uff 😀
cancelling node on Mac is `Ctrl-C` as well. `Cmd-C` is "copy to clipboard" ; )
Thanks!
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
@@starletscarlet It’s even older than that. They’re control characters from ASCII, designed for printer-based "terminals" that were still programmed with punchcards.
@@FlorianWendelborn yes, hence "pre unix systems"
I compile SASS by hand!
😂😂
😂
😂😂😂
😂
😂😂😂😂😂
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!
@Skuash lmao
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!
After several trials and errors trying to download SASS, this is the ONLY video that worked. Thank you soooooo much!
I really like SASS, and this technique has allowed me to learn it by doing. I have taken several tutorials that use HTML & CSS, and tried to redo the CSS in them by using SASS, partials, variables, mixing and so forth. It’s fun to try to determine how to fix problems that occur. I’ve learned a lot. I can just set up an src file with an index.html , sass directory, an assets directory with an images directory and re-use the generated node_modules file, and I’m off to the races. Thanks for the video!
It would be nice to have more videos about NPM, thank you for sharing, I love your content!
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
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 !!!
Please I have problem deploying it, which of the folder to deploy?
This is what I needed! life is easier with your videos
Awesome Kevin, I'm not great with Sass, but you completely demystified it for me. Going to start using this method from now on.
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.
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
Please have you by any chance deploy,if yes how did you deploy
Running into problem when deploying,the css and the asset folder not showing up,need to know the directory to deploy
@@oluwaseunajibowo7422 Please what platform are you using to deploy please? is it netlify?
@@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?
@@carbellsarfo when I deploy,the html shows,but both the sass folder and the asset doesn't show
Perfect timing for me on this one sir.... I was just running into this issue.
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
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.
Can you make a video on how to actually push this to a live site vs doing it locally?
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.
I suggest installing Dart on your system and use the native Sass watch instead of the nodejs version. It performs much faster
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 :)
Just be aware that there’s incompatibilities between all versions of sass.
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
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.
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.
Thank YOU! must test it, that's really great hint.
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
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.
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.
how do you configure that the style.css comes out here -> assets/css? or where the target is?
Old one was not working for me 👀. Thanks for the suggestion ❤️.
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
How to integrate Bootstrap or other vendor css/sass?
Why would you put the public directory on .gitignore? Isn't that the one to be deployed?
I still just write my css and don't know why I'd want sass in the first place. Though I'm building within WordPress using oxygen builder and only takes css anyway
"npm run sass" lifechanger !
Hello Kevin
@Glenn-Marks :: extension does not work properly , like that sccs file $variables do not complete properly in CSS --var :: only show code.
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.
u can write min in uppercase (MIN(...)) in node scss - and it still work - css props - is not case sensitive
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?
Great question, I have my JS file in the Src file and an 404 error occurs
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!
Hey man. Did you find any solution of your second question? Because right now I'm facing the same problem.
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 RUclips), I personally learned it through The Odin Project.
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?
I'm still a bit confused about the src part. You said that we should create those folders, which I did, but you didn't say anything specific about what to put in them. Later you mentioned that the start script was copying things you had in your src folder. The script did NOT create the css folder or the style.css file for me. You showed your style.css and said it copied things from the src folder. This is where I am stuck. Can you please point me to more information.
I'm old school. I learned basic on an IBM 286 with a floppy drive and no hard drive but I've spent most of my career doing infrastructure, architecture, and ITSM work. I'm transitioning back to programming as a semi-retirement trade. It's amazing how much more there is to deal with now but at least I don't have to write bubble sorts.
I always enjoy your videos as they get right to the heart of things without too many unnecessary details, but I'm at a loss with the src folder. I'm ultimately using bootstrap to build static pages integrated with a wordpress site which also relies on bootstrap so my initial use for sass is to customize bootstrap. If you could touch on that in your upcoming course that would be great.
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.
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.
A lot of people invoke gulp with npm. Gulp is fine, but there's a lot of easier and/or more complete tools available.
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!*
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?
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
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=)
Why am I getting error in my package.json in my problems notification.. and why am I no getting the same output while using live server?
when i want to write .sass file vscode does not recognize it and does not have textcoloring what should i do?
Thank you for your css/scss tutorials!
please tell me do you only use node or do you sometimes use the 'watch sass' plugin? thank you, you helped a lot!)
But how do i run Nodemon in conjuction with this? I get errors,and should i set my express backend to listen to the same port? I cant get this to work together.
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.
This is great, but why does the the copy:assets task work? In watch:assets i see run copy:html and not copy:assets but on your site it is working
Thank you Kevin! But my CSS doesn't work.
I think it's a problem with linking it. The html is in src/ and sass too but the css is in public/.
My questions are:
- Do I link my CSS directly from public/css/ ?
- Git doesn't track public/. How would my CSS work when I push my code to Git and host with GitHub pages or Netlify?
For the link, we're focused on the `public` folder, so you should just be able to have the link look for `css/style.css` (or whatever you called your file). As for hosting it, Netlify will run any build command you give it, so you can tell it that the site is in the `public` folder, and to run `npm run build` to build the site.
Okay 👍
How to divide header footer to other templates to avoid repeating?
I ran into this issue literally last night doing the javascript calculator haha luckily I had both live sass and the commandline sass installed
hello master kevin I tried installing it but it did not create node_modules folder. help me please thankkyouu ❤❤
Hello!After i run npm start on cdl , my site becomes an empty html site without anything from the stylesheet being applied.Help?
When I first run npm start, no public folder is created and the browser shows an error: Cannot GET /
Also in the terminal output I see:
> project@0.1.0 watch:sass /Users/john/Sites/SASS_CSS_Training
> sass --no-source-map --watch src/sass:public/css
Error reading src/sass: no such file or directory.
The src folder is there in the project.
Also, the output to style.css has been updated with:
/# sourceMappingURL=style.css.map/
but none of the styles defined in style.scss have been created in the style.css
Great video !! But Is it possible to use this within react js project?
When we ignore public folder the html file we upload to github is linking css/style.css we dont acctually uploaded?
I even Subscribe before watching the video. Hope I will be able to install and use sass. I am currently completing the CS50W
Welcome aboard! Hope you got it working!
@@KevinPowell Yes I did but I used windows powershell to some extent
how do I minify the files when they are compiled to a public folder?
Thanks for the Tut. I tried it and it works but looks like vendor prefixes are not added
Why do we have to copy index.html, style.css etc though? Didn't quite get it. What if I don't need this "public" folder and I just want these scripts to be a better version of LiveSassCompiler?
You could clean things up and do that for sure. Delete the lines you don't want, change the output path for the CSS file and you're good to go. Most modern approaches do take this type of structure though. We can quickly compile things while in dev mode, and run some extra things for production, like minification and file optimizations.
@@KevinPowell oh I see, thank you for your answer and video!
@@dobryden7196 did you get it?
If you did, I would love it if you explained to me
@@goodnessdavid6583 I kinda did, but then just continued using LSC :) To use the method from the video not creating unnecessary folders and files you just have to edit config file shown in video. Remove lines you don't need where script copies files you don't want to copy. I tried doing that, but didn't manage to :( So I came back to using LSC plugin again. Didn't have much time back then though (had to finish the project I was working on), I'm sure it's not that difficult if you really want to use the method from video. Good luck :)
yes i notice that when i use
@use and not compiled
thanks for your great videos🔥
I have my HTML and SASS changes from the src folder making it to the public folder, but I do no see the CSS changes on my localhost page, onnly my HTML changes. I have style.scss in a sass folder in my src folder. Anyone know why this would be happening?
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.
Can this process by used with Visual Studio (Professional)? I don't think VS 2022 has a CTRL+` window.
Hello Kevin, my script it's not working when i use this method, can you tell me what to do please?
onchange command don't exist for me :(
13:50 is the reason I stayed away from this workflow for years and then no easy way to tell adobe CC app to ignore node_modules folder which filled my 350,000 file limit so I'm on the look for a better simpler solution similar to scout-app or Prepros but with ability to auto copy fonts, minify files, convert imgs to webp and so on.. I have that with gulp now but any project that is few months old will throw errors and I have to spend hours debugging while I should be scssing lol
I dont know what seems to be the problem, but 'watch:html' script woulldnt run correctly and copy my html to public folder when written as is, with *.html ( "watch:html": "onchange \"src/*.html\" -- npm run copy:html" ),
For some reason only works like so - "watch:html": "onchange \"src/index.html\" -- npm run copy:html",
i can't using sass with live server extinction I need to reload the page to see the result
Hello, thanks for the video. I tried it but I ran into some problems I’ll try to send an image
So I can’t send an image but it says ERR failed at the project@0.1.0 start script.
This is probably not a problem with non. There is likely additional logging output above
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?
I started my portfolio with out sass npm and would like to now use it can I change it to use sass and npm with out starting my website over again.
Hey Kevin:
Cool video about SASS, I wanted to know what changes you would make in the Json file if you're using PHP
Great! I used to use npm packages, didn't know about vscode extensions. Extensions look a lot simpler. Will be using this now 👍
I tried to build a website using this method, when i try to add my js through tag I get a GET error 404 on the console. IAnyone know why my JS is not loading properly?
Is there a version for dynamic apps?
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.
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.
3:11 if someone needs, you can "fix" this by wrapping min function into calc() :|
Anyone knows how to change the preferred browser that opens my website when I run npm?
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!🍻
After running npm build,which folder did you deploy.
@forward producing an errol its saying errol stylesheet inport
Hi Kevin! How to make all the scss stylesheets compile to one main.css stylesheet in the public folder? I have one main.scss stylesheet into which I import all other scss files. Now all the stylesheet files are compiled in the public folder: main.css, reset.css and so on.
Make sure you part the other files with an underscore, like _reset.scss. that tells sass not to compile it
@@KevinPowell noo way it's that simple 😀 thanks a lot
i must link css files from public folder while using this method? is it right way?
Hi, is adding sass setup on vite easier?
I hope you make a video about vitejs.
npm downloaded to my simple html scss project node_modules folder that contains 13000 elements is heavy af : ( Why do I need to go through the hell in order to compile simple project?!
Hi Kevin, I have an error in sass, why can't the extension be installed?
Please how do I host this file,do I need to run npm build before hosting it ?
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
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/",
Thanks for the awesome content you put out Kevin.
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.
Is it still valid ? Can someone respond to this question that knows the answer
@@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.
Do I have to do the same process for each new project? I mean I have to install the package.json every time.
Hello. I'm just seeing this video in 2023 and you uploaded it about a year ago... Is it still a valid means of compiling scss or are you bring out an update version of this video. Lastly, I have seen a lot of tutorials with scss and they use mostly gulp... Which one gives the best results?
Did you figure out the answer?
the imgs doesnot work for me in html and css
There is something that bugs me a little bit, does that mean that I no longer need the live server extension neither, besides the live sass compiler?
I have been working on a project from an old course that I bought a long time that was using node-sass and now that everything is deprecated i'm trying to figure this new updates to SASS. Thanks so much Kevin, your videos have been a live saver so far.
I mean, I think I did "npm install live-server" as well as part of the devdependencies updates is that the reason or the way you show should get me up an running without live-server?!
Everything worked out fine, except when I try to link between pages, I have an index HTML with two options, English or Spanish, each one is linked to an other HTML, but when I try to get there it says: "Cannot GET /src/html/home.html" can someone please help me out, I did everything as kev explained, and everything else is working, but I just dont know why that is happening
I can't create a build folder even after running npm run build
how can i change the browser from default to Firefox Developer Edition?
"serve": "browser-sync start -b \"firefox\" --server public --files public " finally!
thanks for the video!