scss to override panel's style
i've read just about a few threads on here (this:https://discord.com/channels/883083792112300104/1336019946622423140, this: https://discord.com/channels/883083792112300104/1339381304701227070) and it seems as i CANNOT use my Dashboard.vue file (really blows because i put a lot of effort into making that stupid sidebar work)
so it looks like you can override panels design and i think that's good. but can i use scss, as i have a lot of variables already created and i am not using tailwind? thank you so much.
Happy friday.
also, will i have to be adding "!important" to every class? is there a list of classes i can look up? or do i just go by what the html renders via the inspector? is there ANY way to add literal classes on some html? where does this gets rendered?
8 Replies
I don’t think scss is the problem more so than trying to use a .vue file in a TALL stack.
that part i figured it would be next to impossible lol
i'll just use the theme.css for now
Ok, but even then a vue file has no applicable use case inside of filament.
what about a css "look up table" has anyone ever created something i can look them up? and what about the classes the panel gets rendered with, could i literally change them? to create scss components.
Sure, but css has nothing to do with vue, so I’m confused as to what exactly the problem is.
Im past the vue part and talking about creating scss components
How does one creates scss components that will be rendered in the panel.
Maybe there is a “list” of classes that the panel already uses, that way it would be just a matter of overwritting them. But i assume i would be good using my scss files already 👋
Filament doesn’t care how you compile your styles. But for them to have an affect you have to load the css file properly.
There’s no right or wrong here. All that matters is the the css file is loaded properly.
No, just look at the DOM. Not sure whether a list would even be helpful, because you don't know the structure to those.
Btw: with v4 there's less Tailwind and more CSS classes, so that might be good for you.
Just compile your SCSS file and register the compiled file as a CSS asset. Just like you would with any other page.
Well, if the component is isolated why not? I still have some Vue components running on custom pages, because I didn't want to convert them to Alpine.