PurgeCSS fails with NuxtJS example
See original GitHub issueDescribe the bug
I copied the relevant part from your example, but when I try to run nuxt build, It throws an error: Cannot read property 'compilation' of undefined
. It comes from purgecss-webpack-plugin.js:141:27
To Reproduce Steps to reproduce the behavior:
- I used the following nuxt.config.js
const PurgecssPlugin = require('purgecss-webpack-plugin');
const glob = require('glob-all');
const path = require('path');
module.exports = {
generate: {
fallback: true,
},
/*
** Headers of the page
*/
head: {
title: 'nuxt-test',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js project' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico?v2' },
]
},
/*
** Customize the progress bar color
*/
loading: { color: '#3B8070' },
/*
** Build configuration
*/
build: {
extractCSS: true,
/*
** 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']
})
)
}
},
}
}
- I run npm run build from terminal.
Expected behavior I expect the build to run succesfully with my unused css purged.
Screenshots
Desktop (please complete the following information):
- OS: Ubuntu 16.04
- Version of Purgecss: “purgecss-webpack-plugin”: “^1.1.0” // insatlled from npm
- Webpack version: 3.12.0 // came with NuxtJS
Additional context If I remove the PurgeCSS plugin, the build runs succefully
Issue Analytics
- State:
- Created 5 years ago
- Comments:7 (5 by maintainers)
Top Results From Across the Web
Configuring PurgeCSS for Use With Nuxt - DEV Community
PurgeCSS is a tool for removing unused CSS. It achieves this by cross-checking the compiled CSS with a list of selectors that are...
Read more >custom default styles have been removed by PurgeCSS in ...
How can I config tailwind.config.js to make custom default styles be rendered in result? Whitelist only accepts classnames/ids. Thanks a lot!
Read more >nuxt-purgecss - npm
A neat PurgeCSS wrapper for Nuxt.js. Latest version: 2.0.0, ... Start using nuxt-purgecss in your project by running `npm i nuxt-purgecss`.
Read more >Release Notes - Nuxt
#8978 Reload page once after loading chunk error (resolves #3389 ) ... Examples. tailwindcss-purgecss ... Examples. vuetify. #7767 Use @nuxtjs/vuetify module ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
In the new version
1.2.0
webpack V3 and V4 are supported, so you can use the normal release now to also get the newest purgecss features@Ffloriel I think there is no need to update the instructions, this evening I would like to update the
purgecss-webpack-plugin
to work with both webpack v3 and v4 so the example will work again