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