【发布时间】：2021-05-20 19:29:50
【问题描述】：
我的 laravel 项目中有以下 webpack.mix.js。只是
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'),
]);
如果删除 postcss-mixins 和 postcss-simple-vars 一切正常。但是这两个插件给了我同样的错误
错误：PostCSS 插件 postcss-mixins 需要 PostCSS 8。 错误：PostCSS 插件 postcss-simple-vars 需要 PostCSS 8。
这样
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
但是在 package.json 中我有 postcss 版本 8，所以我无法理解这个问题的原因
"devDependencies": {
"postcss": "^8.2.6",
"postcss-import": "^12.0.1",
"postcss-simple-vars": "^6.0.3",
},
【问题讨论】：
标签： laravel npm webpack laravel-mix postcss