Error: PostCSS plugin postcss-mixins requires PostCSS 8

user_5283574 0
Viewed 4366

I have following webpack.mix.js in my laravel project. Just

const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
   .scripts([
          'public/js/app.js',
          'resources/js/includes/script.js'
      ],  'public/js/app.js')
   .postCss('resources/css/app.css', 'public/css', [
      require('postcss-import'),
      require('tailwindcss'),
      require('postcss-mixins'),
      require('postcss-simple-vars'),
      require('postcss-nested'),
      require('autoprefixer'),
    ]);

If delete postcss-mixins and postcss-simple-vars everything works well. But these 2 plugins gives me same error

Error: PostCSS plugin postcss-mixins requires PostCSS 8. Error: PostCSS plugin postcss-simple-vars requires PostCSS 8.

Like that

npm run dev

> dev
> npm run development


> development
> cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=node_modules/laravel-mix/setup/webpack.config.js

98% after emitting SizeLimitsPlugin

 ERROR  Failed to compile with 2 errors                                      8:50:47 PM

 error  in ./resources/css/app.css

Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin postcss-simple-vars requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)
    at /home/http/app/node_modules/postcss-loader/src/index.js:140:12
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
    at /home/http/app/node_modules/webpack/lib/NormalModule.js:316:20
    at /home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /home/http/app/node_modules/postcss-loader/src/index.js:208:9
    at processTicksAndRejections (node:internal/process/task_queues:93:5)

 error  in ./resources/css/app.css

Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin postcss-simple-vars requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)
    at /home/http/app/node_modules/postcss-loader/src/index.js:140:12

 @ ./resources/css/app.css 2:14-142

     Asset     Size   Chunks             Chunk Names
/js/app.js  729 KiB  /js/app  [emitted]  /js/app

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin postcss-simple-vars requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)
    at /home/http/app/node_modules/postcss-loader/src/index.js:140:12
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
    at /home/http/app/node_modules/webpack/lib/NormalModule.js:316:20
    at /home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:367:11
    at /home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:233:18
    at context.callback (/home/http/app/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
    at /home/http/app/node_modules/postcss-loader/src/index.js:208:9
    at processTicksAndRejections (node:internal/process/task_queues:93:5)
 @ ./resources/css/app.css

ERROR in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
Error: PostCSS plugin postcss-simple-vars requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:153:15)
    at new Processor (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/postcss.js:55:10)
    at /home/http/app/node_modules/postcss-loader/src/index.js:140:12
 @ ./resources/css/app.css 2:14-142

but in package.json I have postcss version 8, so I cannot understand reason of this problem

    "devDependencies": {
        "postcss": "^8.2.6",
        "postcss-import": "^12.0.1",
        "postcss-simple-vars": "^6.0.3",
    },
postcss laravel-mix npm laravel webpack
3 Answers

please try with the next command

npm install postcss-pxtorem@5.1.1 -D

That works for me.

user_31331390
user_30945780

try check "postcss" version in node_modules/postcss-loader/node_modules/ , cause your error look like in postcss-loader

/home/http/app/node_modules/postcss-loader/node_modules/postcss/lib/processor.js:56:25
user_105946450
Related