Tailwind CSS Laravel Mix 错误 - 强制安装 PostCSS 8 [英] Tailwind CSS Laravel Mix Error - Forces PostCSS 8 to be installed

问题描述

我最近创建了一个新的 Laravel 8 项目，使用 Breeze 进行身份验证和顺风 css.运行 npm run watch 时一切正常，但是一旦我运行 npm run prod，我就遇到了错误.我注意到 Tailwind 文档提到存在 PostCSS 问题，因此您需要卸载并运行

I recently created a new laravel 8 project using Breeze for the authentication and tailwind css. All worked perfectly when running npm run watch but once I run npm run prod I ran into errors. I noticed that the Tailwind docs mention that there are PostCSS issues so you need to unistall and run

npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

但是每次我运行 npm run prod 时我都这样做了，现在构建以 98% 退出并说

I done that however every time I run npm run prod now the build quits at 98% and says

Additional dependencies must be installed. This will only take a moment.

Running: npm install postcss@^8.1 --save-dev --legacy-peer-deps
npm WARN browser-sync-webpack-plugin@2.2.2 requires a peer of webpack@^1 || ^2 || ^3 || ^4 but none is installed. You must install peer dependencies yourself.

Finished. Please run Mix again.

这每次都会自动将 PostCSS 更新为 8.1.之后，如果我再次运行 npm run prod，它会一遍又一遍地执行完全相同的消息.

This auto updates PostCSS to 8.1 every time. After that if I run npm run prod again it does the exact same message over and over.

我已尝试删除浏览器同步插件并重试，但仍然无效.

I've tried removing the browsersync plugins and trying again but it still doesn't work.

有人遇到过这个问题或有解决方案吗?

Anyone ran into this or got a solution?

推荐答案

正如 Digvijay 上面提到的，新的 Mix v6 现在支持 PostCSS 8.所以运行:

As Digvijay mentioned above the new Mix v6 now supports PostCSS 8. So run:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

当你运行 npm run prod 之后，你仍然会收到这条消息:

After the when you run npm run prod you will still get this message:

Additional dependencies must be installed. This will only take a moment.

Running: npm install browser-sync browser-sync-webpack-plugin@2.2.2 --save-dev --legacy-peer-deps

npm WARN browser-sync-webpack-plugin@2.2.2 requires a peer of webpack@^1 || ^2 || ^3 || ^4 but none is installed. You must install peer dependencies yourself.

Finished. Please run Mix again.

要解决这个问题，只需将 sudo 添加到它运行的 npm 命令的前面:

To fix this just add sudo to the front of the npm command it ran:

sudo npm install browser-sync browser-sync-webpack-plugin@2.2.2 --save-dev --legacy-peer-deps

现在运行 npm run prod 就可以了！

Now run npm run prod and it should work!

这篇关于Tailwind CSS Laravel Mix 错误 - 强制安装 PostCSS 8的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！