Remove unused CSS from Semantic UI React

Question

Is there a way to remove the unused CSS imported from semantic-ui-css/semantic.min.css?

Checking the Coverage tab in Developer Tools, it seems that this file contains 97.8% unused bytes.

Coverage tab image below:

You could use a tool like PurgeCSS in your build process to remove the unused CSS - purgecss.com — goto
– goto, Commented Aug 26, 2020 at 10:15

Alexandru Lupu · Accepted Answer · 2020-08-30 13:34:45Z

1

I fixed this by importing just the minified CSS file for a specific Component instead of importing the entire framework.

answered Aug 30, 2020 at 13:34

Alexandru Lupu

3212 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Antonio Pavicevac-Ortiz Over a year ago

Hi there! Can you explain what you mean? I ask because isn’t the .min file, still just the entire library?

Alexandru Lupu Over a year ago

Hello! This is how I did it:

import { Button, Form } from "semantic-ui-react"; import "semantic-ui-css/components/button.min.css"; import "semantic-ui-css/components/form.min.css";

In this way you only import the related CSS classes for each component.

Collectives™ on Stack Overflow

Remove unused CSS from Semantic UI React

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related