Vite + SCSS = DevTools are very slow

[snake-py]

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:

• Vite
• Vite-Plugin-SSR (Also see this if I dont use this)
• prime react
• scss ;_;

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.

// overrides
@import './colors'; // colors for a customer and a color version
@import '../common'; // overrides for all themes
@import './overrides'; // overrides for a customer and a color version
@import '../utils';

// prime reaact scss imports (very big)
@import '@mylib/scss/stock/light/variables';
@import '@mylib/scss/stock/components';
@import '@mylib/scss/stock/light/extensions';

// custom components from my component lib build ontop of prime react
@import '@mylib/scss/templates';
@import '@mylib/scss/molecules';
@import '@mylib/scss/organisms';
@import '@mylib/scss/atoms';

// components build in the actual project
@import '../../pages/pages';
@import '../../UI/components/components';
@import '../../UI/widgets/widgets';
@import '../../UI/layouts/layouts';

I then simply import my main scss file into my application like this:

import '#/themes/theme.scss';
Vite configs:

I am using: 
    "sass": "^1.62.1",
 
Here is my css vite config
css: {
    postcss: {
      plugins: [autoprefixer()] 
        // removing autoprefixer does not improve the devtools
    }
  },

[ntkme]

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.

[snake-py]

@ntkme thank you for pointing this out!

I think the most pain is that I cannot use the dev tools to do basic things:

• apply style on an element (works okayish)
• remove style from an element (breaks the side) <- this is the worst, simply toggling on off styles does not work
• too many css changes to elements will freez the page
• basically all changes in the styles tab will slow down the page and eventually freez everything

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.

What profile would you recommend, never used something like this or what is the proper term to google it?

[ntkme]

https://nodejs.org/en/docs/guides/simple-profiling
https://nodejs.org/en/docs/guides/diagnostics-flamegraph
https://developer.chrome.com/docs/devtools/performance/

[snake-py]

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.