# How to remove unused CSS in sage 10 bootstrap theme

**URL:** https://discourse.roots.io/t/how-to-remove-unused-css-in-sage-10-bootstrap-theme/20795
**Category:** sage
**Created:** 2021-05-17T18:25:11Z
**Posts:** 15

## Post 1 by @alkesh — 2021-05-17T18:25:11Z

Hello,

I want to remove unused CSS to speed up the loading time. due to unused CSS I am getting LCP issue.

Please help me how to remove unused CSS or generate critical css .

Thanks

---

## Post 2 by @Dogit — 2021-05-18T20:05:50Z

```
require('laravel-mix-criticalcss');
...
mix
  .sass('resources/assets/styles/app.scss', 'styles')
  .sass('resources/assets/styles/editor.scss', 'styles')
  .criticalCss({
     enabled: mix.inProduction(),
     paths: {
       base: 'http://example.test',
       templates: './dist/styles/'
     },
     urls: [
       { url: '/', template: 'home' },
     ],
     options: {
       minify: true,
     },
   })
```

you can then create more critical css for templates you are using: singular, archive etc.

---

## Post 5 by @alkesh — 2021-05-19T15:02:41Z

@Dogit

Thanks for your reply and help. I really appreciate it.

I added your bit, but there was a required module at top so I added this module using npm install laravel-mix-criticalcss --save-dev but that gives me the following error

> **[Screenshot](https://prnt.sc/134g8ma)**
>
> Captured with Lightshot

Here’s my webpack.js code just to be sure I’m not doing something wrong  
[https://drive.google.com/file/d/11NfvwXD-v6yqNBU3rkdlzfYQKYkI2VSd/view](https://drive.google.com/file/d/11NfvwXD-v6yqNBU3rkdlzfYQKYkI2VSd/view)

Waiting for your reply.  
Thanks again.

---

## Post 6 by @diomededavid — 2021-05-19T15:52:21Z

The easiest way.

> **[Improve Sage 9 + Bootstrap website load time - Tom Broucke](https://tombroucke.be/blog/improving-sage-9-bootstrap-4-load-time/)**
>
> Improve your Sage 9 + Bootstrap WordPress website's loading time by excluding unused CSS and JS.

---

## Post 7 by @alkesh — 2021-05-19T16:06:42Z

Hi @diomededavid

Thanks for your reply.

But I am using sage 10 and there is no file structure like this  
Please help

---

## Post 8 by @diomededavid — 2021-05-19T16:15:05Z

As far as I know sage 10 only supports tailwind. Is this a new project?  
Need more details and screenshots would help.  
Do you have a \_bootstrap.scss file? You may need to manually import.

In the same post I shared they also show how to use BS5 with Sage 10,

---

## Post 9 by @alkesh — 2021-05-19T16:24:13Z

We started this in January  
Do you have a \_bootstrap.scss file? : **No**

> **[Screenshot](https://prnt.sc/134jt7t)**
>
> Captured with Lightshot

You mean this one : [https://tombroucke.be/blog/sage-10-bootstrap/](https://tombroucke.be/blog/sage-10-bootstrap/)

waiting for your reply.

---

## Post 10 by @tombro — 2021-05-19T18:00:01Z

If you started with a sage 10 theme from commit #33005e59 as described in [https://tombroucke.be/blog/sage-10-bootstrap/](https://tombroucke.be/blog/sage-10-bootstrap/), laravel-mix-purgecss should be installed and this will remove all unused css from your production css file.

You could only include the needed classes from bootstrap, as described for sage 9 in [https://tombroucke.be/blog/improving-sage-9-bootstrap-4-load-time/](https://tombroucke.be/blog/improving-sage-9-bootstrap-4-load-time/). In sage 10, bootstrap gets included from resources/assets/styles/config/external.scss. But with purgecss, if you run yarn build:production, purgecss will delete all unused css, so there’s no need to cherry-pick these files.

---

## Post 11 by @diomededavid — 2021-05-20T05:07:27Z

Yup. that is what I said

---

## Post 12 by @alkesh — 2021-05-20T17:04:41Z

Thanks, @diomededavid @tombro

I tired both way [https://prnt.sc/136dy7z](https://prnt.sc/136dy7z) and they removed unused CSS but still facing LCP issue. and purifycss is showing 50% unused.

---

## Post 13 by @diomededavid — 2021-05-20T18:07:14Z

Did you try this link in an empty project? It might help narrow down. If you get the empty project to work you can copy the build files over to your project.

> **[Sage 10 & Bootstrap - Tom Broucke](https://tombroucke.be/blog/sage-10-bootstrap/)**
>
> At the moment of this writing, Bootstrap has been removed from Sage 10 in favor of Tailwind CSS. 1. Manually You could remove Tailwind CSS with yarn remove, remove Tailwind CSS from webpack.mix.js, delete Tailwind CSS configuration file...

I am using sage 9 with this setup:  
[https://discourse.roots.io/t/sage-9-1-please-test/20067](https://discourse.roots.io/t/sage-9-1-please-test/20067)

---

## Post 14 by @DanLapteacru — 2021-05-21T05:48:09Z

Hi @alkesh,

Have you tried with PurgeCSS?

Add Laravel Mix PurgeCSS to your project:

`yarn add laravel-mix-purgecss purgecss-with-wordpress`

and in your `webpack.mix.js` add:

```
require('laravel-mix-purgecss');
const purgeCssWithWordPress = require('purgecss-with-wordpress');
```

after

```
const mix = require('laravel-mix');
```

Also, you need to add PurgeCSS rules to your project:

```
mix.sass('resources/assets/styles/app.scss', 'styles')
  .purgeCss({
    whitelist: [
      ...purgeCssWithWordPress.whitelist,
    ],
    whitelistPatterns: [
      ...purgeCssWithWordPress.whitelistPatterns,
    ],
  });
```

Here is the documentation how to whitelist your classes:

> <https://github.com/FullHuman/purgecss-docs/blob/master/whitelisting.md>

---

## Post 15 by @alkesh — 2021-05-21T16:36:07Z

Hi

Finally able to generate critical CSS and LCP issues is solved as well.  
But now CLS issue is coming and FOUC as well

Please help.

---

## Post 16 by @system — 2021-06-28T18:33:10Z

This topic was automatically closed after 42 days. New replies are no longer allowed.