Css files way too big

Topic: Css files way too big

Gay pro asked 5 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.)

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear <a href="/profile/?id=42547" target="_blank" rel="nofollow">@Gay</a>

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:

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

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

<pre class="prettyprint"><code>@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";
</code></pre>

Best Regards,

Damian

Please insert min. 20 characters.

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:

Please remove from the angular.json import of the mdb.scss file
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
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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

ForumUser: 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

Gay

Pro User 59Support score
5Questions 3Answers 0Snippets