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 !

[@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?

[@Raihan004]

How to configure for the nuxt? Thank you 😊

[@abhinavgeorge5714]

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

[@shahabdadkhan9104]

Thanks Erik you saved my time

[@angelo.piletti]

You had helped me a lot bro! Thanks!!

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

I was looking exactly that, thx a lot

[@paulthompson6934]

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

[@ProgramWithErik]

Synthwave 84

[@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 :-)

[@lukasbabaliauskas1963]

What VS code theme do you use?

[@deborahvancelotte1522]

I think is SynthWave ‘84

[@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!

[@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 :-/

[@downtownsocialite1206]

useful skills!! keep it up!

[@vinhvo4816]

What is extension lit up font ?

[@mikhailzhuravlev4676]

thanks, you're the best 👍

[@kjn6037]

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

Thank you man.

[@Ghanshyam1987]

Can we use this trick in Angular as well?

[@tolgabeyazoglu536]

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

[@ashrafuloli8403]

vary helpful

[@rankail]

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

[@AcidRainbowSkies]

Very helpful and looks really simple, thanks!

[@lupikas2008]

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

[@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!

[@yadusolparterre]

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

[@grizzyb4149]

Thanks

[@markocanovic4936]

And now you get thumbs up! :P

[@ProgramWithErik]

Yay, thank you!

[@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 ;)

[@RavindraSwamyyarramneedi]

not working vue3 application using cli

[@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.

[@fredericsteegmans3566]

Epic

[@bakiyurekli6871]

teşekkürler

[@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

[@heyyy4987]

nice..

[@solvedfyi]

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

[@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😄

[@DIMAWARCRAFT3]

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

[@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 😂😁😁😁🔥🔥🔥🔥

[@videoaudio7669]

Tired of your tricks