laravel-mix: PostCSS warning that it does nothing, no plugin is set

Laravel Mix Version: 4.0.14 (npm list --depth=0)
Node Version (node -v): v11.1.0
NPM Version (npm -v): 6.4.1
Yarn Version (yarn -v): 1.12.3
OS: macOS Mojave 10.14.2

Description:

I have a pure Vue project with laravel-mix as bundler. Its a very simple repository, almost equal to fireworkweb/vue-laravel-mix. All css/scss are wrapped into .vue template files, so no call to mix.sass or any other css.

After upgrading to v4, I keep getting this warning on every build (hot reload, dev and watch), but not when bundling for prod:

You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

You can check the webpack.mix.js with how we use it.

Steps To Reproduce:

Clone above repository and run yarn dev, yarn hot or even yarn watch.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 16
Comments: 20 (3 by maintainers)

Most upvoted comments

I solved it, postcss-loader was using a very old version v3 (For some reason I’m still trying to figure out, but likely a package conflict with @vue/cli-service)

So adding "postcss-loader": "^5.0.0", to my dependencies solved it

+32

Tofandel on Feb 15, 2021

Have you tried doing this?

mix
  .options({
    postCss: [
      require('autoprefixer'),
    ],
  })

+27

amcsi on Mar 15, 2019

Have you tried doing this?

mix
  .options({
    postCss: [
      require('autoprefixer'),
    ],
  })

is ok! thank you!

luffyzhao on Mar 15, 2019

Having the same issue, seems like the PostCSS config array is not passed to Mix/Webpack.

mix.options({
    autoprefixer: false,
    processCssUrls: false,

    postCss: [
        require('autoprefixer'),
        require('postcss-easy-import')(),
        require('tailwindcss'),
        require('postcss-nested')(),
        require('postcss-preset-env')(),
        require('postcss-css-variables')()
    ],
})

Not a single PostCSS plugin works (getting lots of errors) and the output spams the infamous You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. line on each build progress.

Update

I can get this working (somewhat) fine by moving the global Post CSS config/array to the individual build lines:

mix.postCss('resources/styles/main.css', 'public/styles/main.css', [
    require('postcss-nested')(),
    require('postcss-preset-env')(),
    require('postcss-css-variables')(),
    require('tailwindcss')
])

No more warnings! Had about a few hundred, especially on (third-party) CSS and JS files.

sebastiaanluca on May 7, 2019

I solved it, postcss-loader was using a very old version v3 (For some reason I’m still trying to figure out, but likely a package conflict with @vue/cli-service)

So adding "postcss-loader": "^5.0.0", to my dependencies solved it

Thanks, it works for me. I upgrade Mix 6 and PostCSS 8, and it won’t load plugin until finding your guide 😃

manhthang2504 on Feb 26, 2021

I solved it, postcss-loader was using a very old version v3 (For some reason I’m still trying to figure out, but likely a package conflict with @vue/cli-service)

So adding "postcss-loader": "^5.0.0", to my dependencies solved it

Perfect!! Finally a solution.

morfin on May 27, 2021

I solved it, postcss-loader was using a very old version v3 (For some reason I’m still trying to figure out, but likely a package conflict with @vue/cli-service)

So adding "postcss-loader": "^5.0.0", to my dependencies solved it

Days. I spend days fighting this. Eventually ran into your solution here - this worked perfectly. Thank you so much.

bennettblack on Apr 28, 2021

I am trying to configure postcss for tailwindcss and autoprefixer in React app. I used create-react-app with typescript template. Since create-react-app is configured with ES2015, I can’t use require in config file. So I configured the postcss.plugin.ts like this

export default {
  plugins: {
    "tailwindcss": {},
    "autoprefixer": {},
  },
};

But it’s showing You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing..

The original code was

module.exports = {
  plugins: [
    require("tailwindcss")("./src/tailwind.config.js"),
    require("autoprefixer"),
  ],
}

joshiprashanthd on Nov 2, 2020