You can see an example here.
This example shows how to set up PurgeCSS with vue-webpack template.
Once you initialized your project with vue init webpack
, install the webpack plugin for PurgeCSS:
npm i --save-dev glob-all purgecss-webpack-plugin
You need to modify the file webpack.prod.conf.js
by adding the following code:
line 13
// import PurgeCSS webpack plugin and glob-allconst PurgecssPlugin = require('purgecss-webpack-plugin')const glob = require('glob-all')
line 58
// Remove unused CSS using PurgeCSS. See https://github.com/FullHuman/purgecss// for more information about PurgeCSS.new PurgecssPlugin({paths: glob.sync([path.join(__dirname, './../src/index.html'),path.join(__dirname, './../**/*.vue'),path.join(__dirname, './../src/**/*.js')])}),
This example is importing the bootstrap css framework. Without PurgeCSS, the css file size is 117 kB. Using PurgeCSS, the css file size is 2.98 kB