错误: PostCSS插件postcss-mixins需要PostCSS 8

Question

我在我的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",
    },

Answer 1

请尝试下一条命令

npm install postcss-pxtorem@5.1.1 -D

这对我很有效。

Answer 2

将postcss-simple-vars降级至4.1.0

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

可通过单击此处的版本标签找到版本

https://www.npmjs.com/package/postcss-simple-vars

Answer 3

尝试检查node_modules/ postcss-loader /node_modules/中的"postcss“版本，导致错误看起来像postcss-loader中的错误

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