Purgecss
Search…
⌃K
Links

Vue

Example

You can see an example here.

Created with vue-cli

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-all
const 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')
])
}),

Results

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
Last modified 3yr ago