nuxt Post CSS plugin issue in nuxt js 2.*

Post CSS plugin issue in nuxt js 2.*

Open Dipakbisen opened this issue 1 year ago • 4 comments

Discussed in https://github.com/nuxt/nuxt.js/discussions/10604

^{Originally posted by Dipakbisen July 27, 2022}

nuxt.config.js

build: {
    postcss: {
      plugins: {
        'postcss-url': false,
        lost: true,
        // 'postcss-nested': {},
        // 'postcss-responsive-type': {},
        // 'postcss-hexrgba': {}
      },
      preset: {
        autoprefixer: {
          grid: true,
        },
      },
    },
  },

Jul 27 '22 05:07 Dipakbisen

I have the same issue. I have tried every variation I have found on the internet and PostCSS just doesn't work.! I have even tried setting the node env with NODE_ENV=production before the command and it just doesn't show the message, but PostCSS plugins are still not applied. I have also tried moving the config to a separate config file and it doesn't work either, I just get a message from nuxt to move it back.

I have nuxt version 2.15.8 installed

This is my config:

build: {
  postcss: {
    plugins: {
      'postcss-easing-gradients': {},
      'postcss-calc': {},
      'postcss-preset-env': {
        autoprefixer: {},
      },
    },
    order: 'presetEnvAndCssnanoLast',
    preset: {
      autoprefixer: {
        grid: true
      }
    }
  },
  extractCSS: true,
}

Preset Env doesn't seem to do anything or it just ignores the browserslist settings in my package.json and the first plugin, postcss-easing-gradients also isn't applied, as the styles that should be transformed by it are untouched in the output.