Hi
According to
https://www.purgecss.com/guides/nuxt
configuration they provide should work. However with me config:
const webpack = require('webpack')
const PurgecssPlugin = require('purgecss-webpack-plugin')
const glob = require('glob-all')
const path = require('path')
module.exports = {
/*
** Headers of the page
*/
head: {
meta: [
{
charset: 'utf-8'
},
{
name: 'viewport',
content: 'width=device-width, initial-scale=1'
},
{
name: 'theme-color',
content: '#e62c56'
}
],
link: [
{
rel: 'icon',
type: 'image/x-icon',
href: '/favicon.ico'
}
]
},
css: [
'@/assets/sass/app.scss'
],
modules: [
'@nuxtjs/dotenv',
'@nuxtjs/axios',
'@nuxtjs/toast',
'@nuxtjs/pwa',
['nuxt-validate', {
lang: 'en',
}]
],
workbox: {
runtimeCaching: [
{
// Should be a regex string. Compiles into new RegExp('https://my-cdn.com/.*')
urlPattern: 'https://cdn.timeandattendance/.*',
// Defaults to `networkFirst` if omitted
handler: 'cacheFirst',
// Defaults to `GET` if omitted
method: 'GET'
}
]
},
manifest: {
name: 'Elf Productivity LTD',
lang: 'en'
},
toast: {
position: 'bottom-right',
iconPack: 'fontawesome',
icon: 'user',
duration: '4000'
},
axios: {
retry: {
retries: 3
}
},
/*
** Customize the progress bar color
*/
loading: {
name: 'circle',
color: '#3B8070',
background: 'black'
},
plugins: [
'~/plugins/global_plugins',
'~/plugins/visibility',
'~/plugins/lazy',
'~/plugins/directives',
{
src: '~/plugins/typer',
ssr: false
}
],
/*
** Build configuration
*/
build: {
/*
** Run ESLint on save
*/
extend(config, {
isDev,
isClient
}) {
if (isDev && isClient) {
config.module.rules.push({
enforce: 'pre',
test: /\.(js|vue)$/,
loader: 'eslint-loader',
exclude: /(node_modules)/
})
if (!isDev) {
// Remove unused CSS using purgecss. See https://github.com/FullHuman/purgecss
// for more information about purgecss.
}
config.plugins.push(
new PurgecssPlugin({
paths: glob.sync([
path.join(__dirname, './pages/**/*.vue'),
path.join(__dirname, './layouts/**/*.vue'),
path.join(__dirname, './components/**/*.vue')
]),
whitelist: ['html', 'body']
})
)
}
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
Popper: "popper.js/dist/umd/popper.js",
})
],
vendor: ['bootstrap', 'popper.js', 'jquery', 'smooth-scroll', '~/plugins/global']
}
}
and it doesn't work as lightbox in google dev tools still complain about unused css rules. is there a way to make it to work?
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c6975">#c6975</a>)</em></sub></div>