Developmint / nuxt-purgecss

Drop superfluous CSS! A neat PurgeCSS wrapper for Nuxt.js
MIT License
478 stars 18 forks source link

ReferenceError: MODES is not defined #78

Closed simplenotezy closed 4 years ago

simplenotezy commented 4 years ago

I tried installing the library with default advised settings but I am getting:

ReferenceError: MODES is not defined

This is my config:

purgeCSS: {
    mode: MODES.webpack,
    enabled: ({ isDev, isClient }) => (!isDev && isClient), // or `false` when in dev/debug mode
    paths: [
        'components/**/*.vue',
        'layouts/**/*.vue',
        'pages/**/*.vue',
        'plugins/**/*.js'
    ],
    styleExtensions: ['.css'],
    whitelist: ['body', 'html', 'nuxt-progress'],
    extractors: [
        {
            extractor(content) {
                return content.match(/[A-z0-9-:\\/]+/g)
            },
            extensions: ['html', 'vue', 'js']
        }
    ]
},
simplenotezy commented 4 years ago

My build configuration looks like this:

build: {
    postcss: {
        preset: {
            features: {
                customProperties: false
            }
        }
    },
}

So I guess I should just change the mode to "postcss"?

simplenotezy commented 4 years ago

If I set mode to "postcss", I get error:

    $ export NODE_TLS_REJECT_UNAUTHORIZED=0 && nuxt --env.NODE_TLS_REJECT_UNAUTHORIZED=0
    start Loading module                                                         nuxt-purgecss 12:56:22

    WARN  Module is not enabled                                                 nuxt-purgecss 12:56:22

    FATAL  Missing initializer in const declaration                                           12:56:22

    const consola = require('consola')

    SyntaxError: Missing initializer in const declaration
    at new Script (vm.js:83:7)

    ╭───────────────────────────────────────────────────────────╮
    │                                                           │
    │   ✖ Nuxt Fatal Error                                      │
    │                                                           │
    │   SyntaxError: Missing initializer in const declaration   │
    │                                                           │
    ╰───────────────────────────────────────────────────────────╯

    error Command failed with exit code 1.
manniL commented 4 years ago

mode: 'webpack' should work fine. C&Ping the default's wont always work and is not a good practice as these are the defaults 😋

simplenotezy commented 4 years ago

By the way @manniL, can you tell me the difference between using postcss and webpack? I'm not quite sure.

Khezcute commented 2 years ago

By the way @manniL, can you tell me the difference between using postcss and webpack? I'm not quite sure.

Plugins r different, u can use fullhuman plugin for postcss without problems also u can change to TailwindCss with this isn't necessary install extra plugins only a extra line in tailwind.config.js