2

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",
    },

3 Answers 3

0

please try with the next command

npm install postcss-pxtorem@5.1.1 -D

That works for me.

0

Downgrade postcss-simple-vars to e.g. 4.1.0

npm uninstall --save-dev postcss-simple-vars
npm i postcss-simple-vars@4.1.0 --save-dev

Version could be found by clicking the Versions' tab of here
https://www.npmjs.com/package/postcss-simple-vars

0

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
1
  • 1
    As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.
    – Community Bot
    Jan 11, 2022 at 10:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.