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?65 Replies
tbh i dont even now what Vite is or does besides that its a "build tool"
what's the contents of
vite.config.js?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...
yes, but before, don't you need to make sure that it is properly configured?
nope
it just works
in any folder?
in any folder inside the vite proj
that i didn't knew
it doesn't even generate a vite.config
thats only if you want to do something more complicated
interesting, i didnt knew that
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
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) ?
you don't need a .css file
vite does ship with an html file
Will it create a css file or somewhere I can see the compiled?
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?
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
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
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?annndd when i use
npm run dev i get an error. even though that was working fine last night.
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
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
ah yeah
to make a vite project in your current folder you do
npm create vite@latest . (note the period at the end)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 cmdno, 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 workaha thanks guys. looks like my dev script is working and my scss is working!
you're welcome
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
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 tooI 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 ?
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
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
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.
stuff you would want to use outside of a package
like svgo or something
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.you'll mostly want local installs
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 ?
yarn is something you install globally too
or pnpm
okay makes sense. like npm is global
exactly
it is a tool that wont be bundled in the project but that needs to be available ... globally
Volta
Volta is the best way to install node veesions
why not nvm?
nvm is fine, volta is nicer though
as long as it works the same on any os, for me, it kinda doesnt matter
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 ?
you have to install
the idea of it is to pick a node version for you
you can install multiple versions and swap easily
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...
Awe looks like Volta isn’t on windows which is the machine that I have node on
wydm it should be
you should be using wsl anyway though
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
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
So wsl (or wsl2) needs to be installed right , it’s not already installed on a windows machine ?
it needs to be "installed", yes
more like, activated, and a distro downloaded
I'd go with the default to minimize configuration complexity for now, you can always do debian later
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.
The biggest thing with WSL is using it inside of VSCode
oh, yeah, vscode works with is almost imediatelly
Okay so I need to install wsl2, install Volta, then I can update node?
then you can use node
volta will let you install any node version
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
if you screw up, delete and start over
I mean screw up my machine files
if you use wsl, that won't happen