Css files way too big


Topic: Css files way too big

Gay pro asked 6 years ago

Expected behavior The css added to my bundle style***.css should imported only the css used in my application not an enormous css which containts css about chart.js animate.js all boostrap...

Actual behavior I used only fews component of mdb boostrap. My bundle of css got very big it broke all my performance speed of my website. On page speed insight i got from 95/100 to 50/100. I would like to remove the unused css from mdb boostrap.

Resources (screenshots, code snippets etc.)


Damian Gemza staff answered 6 years ago

Dear @Gay

Unfortunately, for now, there's no possibility to remove unused CSS styles from output compilation.

We're working on this, but I'm not able to provide you with any ETA for now.

As a workaround:

  1. Please remove from the angular.json import of the mdb.scss file
  2. Copy the node_modules/ng-uikit-pro-standard/assets/font and node_modules/ng-uikit-pro-standard/assets/img directories to the root directory of your project
  3. To the styles.scss file please add the below imports

Styles from the core are necessary, below the core are styles which you need (remember to import both normal version and angular one).

@import "~ng-uikit-pro-standard/assets/scss/core/bootstrap/functions";
@import "~ng-uikit-pro-standard/assets/scss/core/bootstrap/variables";
@import "~ng-uikit-pro-standard/assets/scss/core/bootstrap/rfs";
@import "~ng-uikit-pro-standard/assets/scss/core/mixins";
@import "~ng-uikit-pro-standard/assets/scss/core/colors";
@import "~ng-uikit-pro-standard/assets/scss/core/variables";
@import "~ng-uikit-pro-standard/assets/scss/core/global";
@import "~ng-uikit-pro-standard/assets/scss/core/helpers";
@import "~ng-uikit-pro-standard/assets/scss/core/typography";
@import "~ng-uikit-pro-standard/assets/scss/core/masks";
@import "~ng-uikit-pro-standard/assets/scss/core/waves";

@import "~ng-uikit-pro-standard/assets/scss/free/buttons";
@import "~ng-uikit-pro-standard/assets/scss/angular/free/buttons";

Best Regards,

Damian


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 7.5.1
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No