How does the CSS priority work with a new React + Vite project?
Hey, I'm trying to learn React, but I wanna implement my scss files and preferably have my own css folders, but for some reason, the main React bundle comes with an index.css, and an app.css (which I swapped into an .scss bundle) but I don't understand a couple things:
1. What's the point of App.css if index.css has a higher priority (so what is inside index.css will overwrite what is inside App.css)
2. Why can't I put my css files inside a css folder/where is the section where I can modify the path towards the css files...
Will I just be coding inside App.jsx? Because index.html seems to not be required nor do I need to link the stylesheets or scripts inside the head of the html
13 Replies
I would look into how React CSS modules work to have a better understanding maybe?
Basically you would import the styles for each component in that component file
in my screenshot only index.css is imported, but app.css also works even tho it isn't imported
Why can't I put my css files inside a css folder/where is the section where I can modify the path towards the css files...I was responding to 2 sorry xD No clue about why React does stupid things its stupid
like I tried to link the path to the index.css inside the css folder but I can't figure out a way to make it work
it acts as if the css folder was empty
Right again you should read on how React does CSS.
App.css is what you are going to want for the App.jsx component
When you make a new component you will then have another folder Component/Comp.jsx, comp.module.css *fixed naming
Worst part is there is no offical setup on the Docs for just use with Vite. The recommended way is to start now with NextJS as they are pushing the fact you should be a using a Meta-framework with it (which is good)
Honestly this is why Tailwind is popular ... cause CSS is React is scuffed.... If I was forced to use React even I would probably reach for TW >.>;;
I could be wrong but assuming on past Vite knowledge, you would want to put static css in /public/css/index.css and it would import into main.jsx as
/css/index.css 🤔if I learn Next.js if a company asks me to use only React, will I be able to make the downgrade?
I fix the issue btw thank you!
I mean yes because you wouldn't be setting up the system. Most likely you would be making React components which is still very much a part of NextJS
NextJS just allows you to make pages (have routing) and be able to pick how you render those pages
oh okay
SSR/SSG(static)/CSR
well I'll probably do one React project then hop on Next.js projects
Rangar and I just had a heated/winded debate about learning JS frameworks in MetaFrameworks lol
in #chit-chat but I wouldn't bother reading it just know that people have different opinions on how to learn and structure websites/webapps.. None is more confusing and convoluted as React righ tnow.
As I mentioned React docs tell you to start with NextJS/Remix(React Router7 soon).
Which I agree with personally (others might not lol)
man the biggest downgrade about learning React is that I felt like jQuery was so great
I loved jquery's syntax and built in functions
but going back to vanilla javascript hurts a bit