-
Notifications
You must be signed in to change notification settings - Fork 350
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Vite + SCSS = DevTools are very slow #2079
Comments
If you mean your hot-reload is gradually becoming slower and slower, it likely has noting to do with sass. This kind of gradual slowdown is usually caused by all kinds of leaks from hot-reload. Try google "hot reload leak" you will find this is a very common issue. It could be a leak on the node side slowing down hot-reload, or could be leaks on browser side for retaining old objects, scripts, handlers, etc. I don't think anyone here can help since this does not look like a sass issue. The only suggestion I can make is to use profiler to see what is getting slower on both node side and browser side. |
@ntkme thank you for pointing this out! I think the most pain is that I cannot use the dev tools to do basic things:
What profile would you recommend, never used something like this or what is the proper term to google it? |
I found the issue why the dev tools got so slow. It seems that vite is injecting all the css as style tags for dev. This seems to slow down my dev tools drastically. When I remove the style tag and include all the styling with link tags it speeds up drastically. Luckily vite-plugin-ssr (Vike). Is already injecting all styles vie link tags so I remove now the style tags manually and the dev tools started working again. |
Hey,
I know that this might not be the correct place to ask but I tried many other places, so I thought I go somewhere where people know about sass compiling and if it could even be my problem. The reasons why I might think it has something to do with this package is that I only see it during development but not in production where all the scss is compiled to css.
The issue
My dev tools became so slow, if I want to change any styling there it essentially breaks the application. Fo instance if I change anything in my scss I need to wait for quite some time until the change is reflected on the page and more than once I need to refresh the page or even restart the server. I really need help to fasten this, because this becomes unbearable to work with. Styling anything is super super painful and takes 4 times as long as it usually would and should.
I am unsure why this happens.
My Set Up
Tools I am using:
So, first of all I need to use scss, because I am using PrimeReact and they use scss, and I need to implement multiple themes where I can then change their base components as well. For that I need to overwrite their scss vars.
This is my main scss file.
I then simply import my main scss file into my application like this:
import '#/themes/theme.scss';
Vite configs:
The text was updated successfully, but these errors were encountered: