So I want to customise the styling for my Vuexy template , and first I directly edit the css file in public directory but then I find out that the changes in public directory will be resets after it was compiled via npm dev. So I look at the resources and couldnt find any source code , so I open up the Vuexy documentation and it says to overide the variable.

But from what I understand , it just says changing the variable , but does it mean I cant change things like adding new classes , hover effects , pseudo element etc? If i can , how or where can I edit and override them without getting reset after compiling.

Here is the documentation source –

(https://demos.pixinvent.com/vuexy-html-admin-template/documentation/customization-sass.html#theme-support)

I try to include style.php insides the section file where it will be used throughout the template layout and plant my custom css properties there.

Some of the properties are working but some arent , and the real issue is this change apply to both dark and light theme, which make it difficult to apply different styles properties.