is there any way to make my sass files less messy?
As you can see, for every sass file I make, there's the map and the regular css file that comes with it, but it makes my css folder pretty messy, is there any way to hide the unnecessary ones and only keep the sass? would making a sass folder and putting the sass files inside while keeping the other files inside the css folder work?
16 Replies
shouldnt the css files go to the public folder?
Look up the 7-1 pattern
if you don't want a Sass file to be compiled, start the name with an underscore:
_example.scssOhhh does that affect the website on a live browser in any way? Or if someone else pulls my project?
So everything but the jsx files goes in the public folder?
No, leave the CSS there. You're using Vite, so only static files should be in public, like your images and whatnot
As for the Sass files, generally you'll have subfolders to help keep things organized, and just have the main
.scss file
Like, this is from my most recent project. The only file that's being compiled into a .css file is my main.css
Actually, I do have to ask, how are you compiling your Sass? You're using Vite, so you shouldn't have any
.css folders or maps anywhere until you build the project, and they wouldn't be in your srcnot gonna lie, i don't know
while the documentation says to use
_index.scss, i prefer to use index.scss, and it works the same, but looks differentOhhh that helps a lot
I use the sass vscode extension
Should I just import sass with an npm?
Doesn't work the same though, it'll compile extra files if you do that
Yeah, you already have vite going, which can handle that. Once you install it as a dependency, it'll take care of it for you.
Just make sure you import the .scss file where you need it, and don't link to the CSS file itself. If you important the scss file vite will figure it out for you
Wait it's actually you Kevin yourself that is answering I just realized wow hahaha
But I think I understand what you mean, I'm probably gon look up a video to make sure I do the right steps
Thank you!
depending on the configuration, yes
I've never seen a configuration for Sass that doesn't do that. Not saying it's not possible, but it'd be outside of the scope of the sass compiler to even make that change afaik
with webpack (using laravel mix), i specified the files i wanted to compile and it did the thing
obviously, following the documentation is better, but it's so ugly
fair enough
it works better than expected, as i have a specific
.scss file for each thing i need