nebular icon indicating copy to clipboard operation
nebular copied to clipboard

Compilation of Nebular theme is too slow

Open mathisGarberg opened this issue 5 years ago • 11 comments

Issue type

I'm submitting a ...

  • [X] bug report
  • [ ] feature request

Issue description

I'm recently upgraded from Nebular v. 3.5 > v.4.4 and Angular v. 7.4 > 8.2. The migration went well, and everything is currently sat up and working. The problem I'm experiences has too to do with the compilation time of the Nebular theme(s). When adding it, the compiler stops for about 10-20 seconds before continuing, a time-span that reduces productivity across the team.

compilation-time-nebular-theme-issue

Expected behavior: The compilation time of the Nebular theme(s) should be more or less fluent.

Steps to reproduce: The reproduction of the problem has the minimum requirement for a Nebular application with two themes. When cloning the repository and running npm start, you will see the compilation of the application is stopping when it hits the styles.scss file.

You can view the entire application setup at the following GitHub repository.

Other information:

-------------------------------
"@angular/animations": "~8.2.7",
"@angular/cdk": "^8.0.0",
"@angular/common": "~8.2.7",
"@angular/compiler": "~8.2.7",
"@angular/core": "~8.2.7",
"@angular/forms": "~8.2.7",
"@angular/platform-browser": "~8.2.7",
"@angular/platform-browser-dynamic": "~8.2.7",
"@angular/router": "~8.2.7",
"@nebular/eva-icons": "4.4.0",
"@nebular/theme": "^4.4.0",
"@nebular/date-fns": "4.3.1",

Note: If you want me to provide any further information, please let me know.

mathisGarberg avatar Oct 21 '19 08:10 mathisGarberg

Yep, I just started a new Angular project, only added nebular & started a new custom theme.

It takes about 20 seconds to build the scss, each time I save a file. Computer I'm working has a pretty good hardware configuration, so I don't think it's because of it.

armoucar avatar Nov 07 '19 17:11 armoucar

Any workaround for this?

sazalihisham88 avatar Dec 16 '19 04:12 sazalihisham88

I put together the smallest part of something I'm doing at work, maybe you can find some utility in it.

https://github.com/armoucar/nebular-custom-theme

I could get it running faster this way. But I still want to take a look and see if I can do the same sass compilation process in the Nebular getting started project.

$ time gulp sass:themes
Using gulpfile ~/dev/workspace/nebular-custom-theme/gulpfile.js
Starting 'sass:themes'...
Finished 'sass:themes' after 2.46 s
gulp sass:themes  2.84s user 0.11s system 101% cpu 2.906 total

$ time gulp sass:themes
Using gulpfile ~/dev/workspace/nebular-custom-theme/gulpfile.js
Starting 'sass:themes'...
Finished 'sass:themes' after 2.47 s
gulp sass:themes  2.86s user 0.11s system 101% cpu 2.921 total

armoucar avatar Dec 18 '19 01:12 armoucar

Fiddling with Nebular at the moment and I've noticed that a big slowdown while compiling scss is still present, there's no way to speed it up? It makes you waste like 20 seconds for every single change, at the end of the day seconds become hours!

Gonoshift avatar Jun 18 '20 12:06 Gonoshift

This issue should be re-open. I still have the issue with the current version (about 30s for. each change in the theme style)

wadinj avatar Aug 14 '20 10:08 wadinj

Hi,

Does anyone found a workaround to this ?

wadinj avatar Oct 14 '20 20:10 wadinj

News ? I just started on Nebular for a personal project and compare to my pro projects under Ng-Zorro (less) the compilation takes minimum 10min before starting the server :sob:

jboucly avatar Nov 03 '20 19:11 jboucly

So I just noticed this same issue and I am wondering if it's possible to speed this up? Almost seems like a better idea at this point to pre-compile Nebular and simply load the result while not having it being compiled every change?

Perhaps someone by now has found a workaround?

Octopixell avatar Nov 27 '20 15:11 Octopixell

Hi, I found a workaround, enable css custom properties in your themes.scss file and compilation time will reduce to a few seconds

image

VincentPeraud avatar Feb 12 '21 09:02 VincentPeraud

Hi, I found a workaround, enable css properties in your themes.scss file and compilation time will reduce to a few seconds

image

I confirm it speeds up a bit thank you ! :pray:

jboucly avatar Feb 12 '21 20:02 jboucly

Hi, I found a workaround, enable css custom properties in your themes.scss file and compilation time will reduce to a few seconds

image

Really worked. Thank you. However I'd like to know what disadvantages this could cause in my project. Perhaps a larger styles.scss file?

cgcdoss avatar Feb 21 '24 13:02 cgcdoss