How to remove unused css in vuetify?

@haylee.mertz 

One way to remove unused CSS in Vuetify is by using a tool like PurgeCSS. PurgeCSS is a tool that analyzes your CSS files and removes any unused styles, reducing the file size and increasing performance.

To use PurgeCSS with Vuetify, you can follow these steps:

1. Install PurgeCSS as a development dependency by running the following command in your project directory:

1

npm install purgecss --save-dev

1. Create a PurgeCSS configuration file in your project directory. For example, you can create a file named purgecss.config.js with the following content:

1
2
3
4
5
6
7
8

module.exports = {
  content: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.js',
  ],
  defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
};

This configuration tells PurgeCSS to analyze all HTML, Vue, and JavaScript files in the src directory and extract class names based on regex patterns.

1. Add a script in your package.json file to run PurgeCSS. For example:

1
2
3

"scripts": {
  "purgecss": "purgecss --config ./purgecss.config.js --out ./dist/css/"
}

1. Run the PurgeCSS script to remove unused CSS styles from your Vuetify project. This will generate a new minified CSS file in the dist/css directory.

1

npm run purgecss

1. Update your project to use the new minified CSS file that was generated by PurgeCSS.

By following these steps, you can effectively remove unused CSS in your Vuetify project using PurgeCSS.