KPC
Kevin Powell - Communityclevermissfox
Using Vite with SCSS
So i was advised to try scss with vite instead of just using node as i was getting errors.
What i did was:
-create new folder on desktop and open it in vs code
- use the cmd
npm create vite@latest
-Selected Vanilla JS framework
-Selected Vanilla JS variant
-used the cmds as instructed cd vite-project-2, npm install, npm run dev
-then the cmd npm i -D sass which is now showing in my devDependancies
where do i go next? this is where i got stuck with node when i would:
-create src/scss/main.scss in the root
- added some basic styles to the main.scss file
-in the terminal, typed sass --watch src/scss:dist/css
everytime i would get the error The term 'sass' 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 even though sass (and the compatible version) was shown as a devDependancy. I thought maybe it had something to do with chocolately, perhaps needing to install with choco on this machine as when i first installed node, the version was def installed as verified with the command prompt but anytime i went into vs code , it said it wasnt. i had to install Chocolatey to get Node and NPM to work.
but i digress. what are the next steps to try for this vite/sass file ? do i do the same thing e.g create src/scss/main.scss and use the --watch cmd?C
clevermissfox•18d ago
tbh i dont even now what Vite is or does besides that its a "build tool"
ἔρως•18d ago
what's the contents of
vite.config.js?S
Shane•18d ago
you don't need to run sass watch
the next step is to run npm run dev
and everything should just work
let me try locally rq to make sure that is the case...
ἔρως•18d ago
yes, but before, don't you need to make sure that it is properly configured?
S
Shane•18d ago
nope
it just works
ἔρως•18d ago
in any folder?
S
Shane•18d ago
in any folder inside the vite proj
ἔρως•18d ago
that i didn't knew
S
Shane•18d ago
it doesn't even generate a vite.config
thats only if you want to do something more complicated
ἔρως•18d ago
interesting, i didnt knew that
S
Shane•18d ago
vite adds hmr which means that anytime you save a file your code should update automatically without reloading. It has more advanced features but the reason I suggested vite for sass is that you just install sass with the npm i sass cmd and it just works out of the box with no config
just create a scss file and add a scss import to your js and you are good to go
C
clevermissfox•18d ago
Do I need to make a .css file to push the compiled css to ? There’s also no html file , will it work with an index.html or do I need to create the dom with JavaScript (since I chose vanilla js for a framework and variant when starting vite) ?
S
Shane•18d ago
you don't need a .css file
vite does ship with an html file
C
clevermissfox•18d ago
Will it create a css file or somewhere I can see the compiled?
S
Shane•18d ago
You can import the scss from js and do all the html in the html
it will show up in node modules somewhere probably, it doesn't matter though because you shouldn't need to see it?
C
clevermissfox•18d ago
Hm maybe I didn’t look thoroughly enough for html
I do like to use scss sometimes in codepen for challenges that won’t take scss to run loops and then just copy the compiled to paste into the challenge which works fine for my needs , was just wondering if I could start doing so locally instead of codepen
S
Shane•18d ago
if you run npm run build
the compiled css will show up in dist
it will be minified though
It will also show up if you inspect element
C
clevermissfox•17d ago
Good point thank you
good grief , the html file is in the root an d i did see it last night bc i saw the
<div id="app"></div> 🤦🏻♀️
i also wasnt in front of my pc earlier but it came with a style.css file as well that is being imported into the main.js file. do i replace the css file with the scss file? or do i import them both?C
clevermissfox•17d ago
annndd when i use
npm run dev i get an error. even though that was working fine last night.
S
Shane•17d ago
not sure what you did wrong
you can try running npm ci
Honestly I would just make a new vite projectr
if you manage to replicate the issue I can help you debug more
ἔρως•17d ago
you're running it from the wrong directory
vite-project-2 is what has the package.json file
the command is being executed in vite2
S
Shane•17d ago
ah yeah
to make a vite project in your current folder you do
npm create vite@latest . (note the period at the end)C
clevermissfox•17d ago
good catch so do i just write
vite-project-2 npm run dev?
what does the period at the end do ? i didnt include that in the initial cmdἔρως•17d ago
no, you cd into it
and then you run the command
or, just open the
wite-project-2 folder in vscode instead, which should start a terminal in that folder
both should workC
clevermissfox•17d ago
aha thanks guys. looks like my dev script is working and my scss is working!
ἔρως•17d ago
you're welcome
S
Shane•17d ago
the period at the end means create vite in current directory
if you don't add a period, it creates a new directory
with whatever name you give the vite project
ἔρως•17d ago
also, in cli, a period means "current directory"
so, if you do
cd ./ you stay in the same place
this works on windows, linux and macos
bsd-based and unix-based oses tooC
clevermissfox•17d ago
I was wondering why I had two folders. Good to know thank you so much, it’s exciting to finally get it working
@ἔρως @Shane When would you want to use a global install? -g does that make it available in every project you make ? And then you just have to run it ?
ἔρως•17d ago
a global install is more for things like yarn
a local install is for things you will have to bundle in the project
this is how i understood it, so far
S
Shane•16d ago
Global means anything that you want to use outside of a package
Everything for a specific project that is needed either for dev or production should be installed in the package itself
C
clevermissfox•16d ago
Do you have any examples of something you would want to install globally though ? I’m watching tutorials and have seen a few ppl use the global install and I’m failing to understand when you would actually want to do so or how it’s utilized when installed globally.
S
Shane•16d ago
stuff you would want to use outside of a package
like svgo or something
S
Shane•16d ago
npm
svgo
Nodejs-based tool for optimizing SVG vector graphics files. Latest version: 3.2.0, last published: 4 months ago. Start using svgo in your project by running
npm i svgo. There are 1763 other projects in the npm registry using svgo.S
Shane•16d ago
you'll mostly want local installs
C
clevermissfox•16d ago
got it, i thought that made the most sense but obviously what do i know- not enough;
i also wrote a whole post about the best way to update node and now i cant find it. ive been readint docs and watching tutorials and some people say to go to node and download the new version but i wonder does that mean i have to search through and remove the previous version (as well ads the chocolatey mess ) and then reinstall both? or do i just use the node@latest cmd? does that override old, useless files ?
ἔρως•16d ago
yarn is something you install globally too
or pnpm
C
clevermissfox•16d ago
okay makes sense. like npm is global
ἔρως•16d ago
exactly
it is a tool that wont be bundled in the project but that needs to be available ... globally
S
Shane•16d ago
Volta
Volta is the best way to install node veesions
ἔρως•16d ago
why not nvm?
S
Shane•16d ago
nvm is fine, volta is nicer though
ἔρως•16d ago
as long as it works the same on any os, for me, it kinda doesnt matter
C
clevermissfox•14d ago
Oh gosh , I’ll have to look into this . Another one I’ve never heard of 🤣
Is that something I have to install or is it already installed with node/npm ?
ἔρως•14d ago
you have to install
the idea of it is to pick a node version for you
you can install multiple versions and swap easily
S
Shane•14d ago
volta lets you pin a node version you use per project
https://dev.to/pierre/switch-from-nvm-to-volta-384a
DEV Community
I’ve switched from NVM to Volta. This is Why
I've been using nvm for quite a long time to manage the different Node versions on my machine. nvm...
C
clevermissfox•14d ago
Awe looks like Volta isn’t on windows which is the machine that I have node on
S
Shane•14d ago
wydm it should be
S
Shane•14d ago
S
Shane•14d ago
you should be using wsl anyway though
C
clevermissfox•14d ago
Wait I misread. In the article you linked it said “Finally, although you might not need this, it’s nice to mention that Volta is also available on Windows” and I read “finally although you might need this , it’s nice to mention that Volta is also NOT available on windows “. 🤦🏻♀️
Oh gosh I’ve never heard of this either. I’m still trying to understand Powershell and what it does
There is so much to learn and even more I don’t know that I need to know. I learn best with videos vs docs so I’m looking for some YouTube tutorials on all of this. The challenge is that even with something like updating node there are so many different videos on them and if I run into an error I get stuck
ἔρως•14d ago
wsl is just a simplified vm for windows
i personally recommend installing debian instead of the default ubuntu
but both work fine
oh, and make sure you have wsl2
C
clevermissfox•14d ago
So wsl (or wsl2) needs to be installed right , it’s not already installed on a windows machine ?
ἔρως•14d ago
it needs to be "installed", yes
more like, activated, and a distro downloaded
S
Shane•14d ago
I'd go with the default to minimize configuration complexity for now, you can always do debian later
S
Shane•14d ago
Install WSL
Install Windows Subsystem for Linux with the command, wsl --install. Use a Bash terminal on your Windows machine run by your preferred Linux distribution - Ubuntu, Debian, SUSE, Kali, Fedora, Pengwin, Alpine, and more are available.
S
Shane•14d ago
The biggest thing with WSL is using it inside of VSCode
ἔρως•14d ago
oh, yeah, vscode works with is almost imediatelly
C
clevermissfox•14d ago
Okay so I need to install wsl2, install Volta, then I can update node?
ἔρως•14d ago
then you can use node
S
Shane•14d ago
volta will let you install any node version
C
clevermissfox•14d ago
I think this is all a bit over my head, looks like I have much more studying to do or I am gonna screw something up
ἔρως•14d ago
if you screw up, delete and start over
C
clevermissfox•14d ago
I mean screw up my machine files
ἔρως•14d ago
if you use wsl, that won't happen
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
34KMembers
View on DiscordWant results from more Discord servers?
More PostsAbsolute position with gridI need help to position a text and image inside a grid item which size its 2fr but trying to positiSVGs <use> and not...Hi guys I really would aprecciate come help here. In this HMTL are two ways of using svgs but one ofHandling inner text when element is transform: scale()'d, how to make not blurrier when scaled up?GH:https://github.com/nnall/hm-frontend-Nick.git
I have an element in my react return, several realReact + Tailwindcss users? Help with some examples please!I'm trying to learn this damn thing, unfortunately every job here uses it and I've done nothing but Navbar helpi cant get the navbar to go end to end on the pageVS code control panelhey guys does anyone know how can i add source control button in my vs code left panel i tried everyAdding code blocks to websitesI see some websites and blogs like this have these really nicely styled code blocks with syntax highFlexbox column swap without media or container querie.I watched this video by KP (https://www.youtube.com/watch?v=LEkFckg7sfw), and got the flex solution Is there a way to test for css nesting support?I’ve run into some trouble with nesting support on mobile browsers, and I was thinking it might make<a/> in component return being auto-assigned "button" class somehow, overwriting my classNamesThis is the relevant portion of the return:
```
<ul className="quickLink_list">
<li>
creating calculator```
let operatorsArray = document.querySelectorAll('.operator')
function bgColor(a){
let bgColLogin Page Improvements/ChangesI'm still learning html and css. What can I improve in my login page?
<body>
<div class="main-cAnimating outline offsetsIs there a smoother way to animate the offset of an outline? It looks choppy.
https://codepen.io/nVertical alignment without wrapper?Problem: https://codepen.io/peendoc/pen/YzMgrwN
I want the links to be clickable along the entire heAccessibility with icons/ images in linksHey everyone, I have been looking around with no real luck about the best practice for using svg's aCSS Custom Property Cheat SheetThis is my own cheat sheet for a alternative of Kevin's own oneNeed help with setting "slide-out" animation to a slide-in form.Currently it is working but I'm concerned about the usage of pointer-events as it will be availablt trouble using express.jsi have a js file that im using express.js code using the nodemailer module. What im trying to do is having trouble wrapping my head around mobile menushi all, i really love doing front end work, enjoy really getting into the gritty with SCSS, but my bflow utility issueHey, If I have a div with another div as it's child both utilizing a flow utility with each of their