This One Weird Sass Trick Will Save You Time On Your Next Project! // Vue Sass Tutorial Tricks

[@ProgramWithErik]

📚 Check out this black friday - Cyber Monday sale!! course.vuecourse.tech

[@mysterOrel7924]

Heard this trick in a podcast... glad to see it in video ! This tricks are very useful !

[@shahabdadkhan9104]

Thanks Erik you saved my time

[@kenbee85]

Thanks for this. I have encountered an error while following this tutorial. For some reason it doesn't work. I think i have the latest vue cli so I used this instead: npm install -D sass-loader@^10 sass Which was actually on the guide with vue sass loader. Just in case some also encountered an issue. Cheers!

[@InglesporMinutoconAnthonyMartz]

thanks for the suggestion, i was getting that error

[@jorgecanas3668]

I've seen 20 incorrect tutorials before yours, thank you sir!

[@kabahblog]

In order to make the Css file in the public folder as a compressed file, what should I add? thank you

[@shadow_3213]

I am currently creating a shopping basket with Vue 3 and SASS, thanks for the hint :-)

[@МариАлекса]

I was looking exactly that, thx a lot

[@Raihan004]

How to configure for the nuxt? Thank you 😊

[@InglesporMinutoconAnthonyMartz]

can you add more than one additional data with the route to another scss file, so you can have multiple sharable scss files across the different components?

[@paulthompson6934]

whats the name of the theme you are using in vscode?

[@ProgramWithErik]

Synthwave 84

[@angelo.piletti]

You had helped me a lot bro! Thanks!!

[@GamerWho]

Does this still work if you are using nuxt? I get errors thrown in my components that my sass variables defined in my global are undefined :-/

[@lukasbabaliauskas1963]

What VS code theme do you use?

[@deborahvancelotte1522]

I think is SynthWave ‘84

[@tolgabeyazoglu536]

When I add a new import file, the server does not start without turning it off and on, what do you think?

Thank you man.

[@swojnowski453]

Do it like that and you will have to remember you did it like that. Do it for 6 different files and you are lost after a day or two. After 3 days you will be scratching your head why stuff that is supposed to be working is this way is working that way. In summary, build trees not graphs (yeah, I know a tree is a graph), hopefully you know what I mean ;)

[@grizzyb4149]

Thanks

[@abhinavgeorge5714]

Noice !!!! Really luv ur vids !! Great vids

[@ashrafuloli8403]

vary helpful

[@Ghanshyam1987]

Can we use this trick in Angular as well?

[@vinhvo4816]

What is extension lit up font ?

[@yadusolparterre]

Isn't it bad practice to use @import? Scss requires us to use @use now

[@mikhailzhuravlev4676]

thanks, you're the best 👍

[@rankail]

What should i do if i want to use an indentation of 1 tab instead of 2 spaces?

[@downtownsocialite1206]

useful skills!! keep it up!

[@kjn6037]

Any reason why you named your global css that starts wtih _ ?

[@lupikas2008]

isnt better to use scss style file rather SFC styling? And why?

[@marble_wraith]

1. Don't use @import any more, use @use and/or @forward. 2. In vite 2.0 the setup is the same, except it's in vite.config.[ js/ts ]

[@OttoAgne]

& scss will compiled (to css) on the vite server running? is a PostCSS needed

[@mattc16]

For reference, @import would pull in the entire file every time you imported it from multiple files and every variable, mixin, etc was global. @use - only imports the file once, no matter how many times it’s imported from different files. It also makes variables, mixing, etc. scoped to the file with a namespace so that you can find errors much easier. @forward - does the same thing as @use except it makes all variables, mixing, etc. local to the file you are bringing it in on. This way you don’t have to use namespaces. This is great for index files.

[@SLRModShop]

@@mattc16 how do add namespaces in vue.cofing.js? AdditionalData has backquotes so, in '@use "@/styles/sass/variables.scss" as variables' (for example) 'as variables' isn't interpreted.

[@markocanovic4936]

Ok the issue is with Node version , if you use Node 14.x.x and you use --> "vue init webpack app-test..." Then you need to install node-sass@4.14.1 and if you use Node 15.x.x then it won't work..

[@ProgramWithErik]

Thanks!

[@RavindraSwamyyarramneedi]

not working vue3 application using cli

[@fredericsteegmans3566]

Epic

[@bakiyurekli6871]

teşekkürler

[@markocanovic4936]

And now you get thumbs up! :P

[@ProgramWithErik]

Yay, thank you!

[@heyyy4987]

nice..

[@solvedfyi]

Trying to figure out if this title is making fun of clickbait or surrendering to it

[@AcidRainbowSkies]

Very helpful and looks really simple, thanks!

[@markocanovic4936]

Not working, I don't know how I have issue installing SASS always. Now I need to first solve issue of installing SASS and then too watch this video..

[@ProgramWithErik]

Yes! Check out some of my other vids on Vue and Sass

[@vladutcornel]

"For Sass, use SCSS" - This must be so confusing, unless you know why that is.

[@wasd3108]

well is it tho, u go to their website and see sass and scss and css next to eachother, ok scss is with css rules, brackets, semicolons, ok whatever ill add those and finito

[@thecscontent5110]

I also do videos about programming!😁

[@abhinavgeorge5714]

Nice content man...... I also do the same thing

[@thecscontent5110]

@@abhinavgeorge5714 Thanks man😄

[@milkyway9225]

This one weird trick made woman want me. How many ,,these one weird tricks" are there? I love how youtube geeks incorporate these one weird tricks from adult sites to their cheap clickbaits :D

[@jimmyj.6792]

Super cooool but better to use tailwindcss 😂😁😁😁🔥🔥🔥🔥

[@DIMAWARCRAFT3]

oh dude. too less likes then you deserve) ty sooooo much

[@videoaudio7669]

Tired of your tricks