Tailwind CSS Laravel Mix 错误 - 强制安装 PostCSS 8答案

【问题标题】：Tailwind CSS Laravel Mix Error - Forces PostCSS 8 to be installedTailwind CSS Laravel Mix 错误 - 强制安装 PostCSS 8
【发布时间】：2021-04-25 11:59:42
【问题描述】：

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

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

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

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，它会一遍又一遍地发出完全相同的消息。

我已尝试删除 browsersync 插件并重试，但仍然无法正常工作。

有人遇到过这个问题或有解决办法吗？

【问题讨论】：

标签： laravel webpack laravel-mix tailwind-css

【解决方案1】：

laravel-mix v6 现在supports PostCSS8

根据tailwind docs，建议使用npm install tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

使用新的 Mix v6，运行 npm install tailwindcss@latest postcss@latest autoprefixer@latest

在此之后，npm run prod 将按照应有的方式运行。

【讨论】：

感谢您的帮助。我从来没有意识到 Post CSS 可以与新的 Mix 版本一起使用，干杯。我意识到它一直安装浏览器同步，因为我的 webpack 文件中仍然有浏览器同步代码，我删除了这个并且 npm run prod 现在可以工作，但是一旦我阅读它，我仍然得到“”npm WARN browser-sync-webpack -plugin@2.2.2 需要 webpack@^1 的 peer || ^2 || ^3 || ^4 但没有安装。您必须自己安装对等依赖项。"" 错误。所以现在显然是浏览器同步问题。

【解决方案2】：

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

npm install tailwindcss@latest postcss@latest autoprefixer@latest

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

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 命令的前面：

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

现在运行 npm run prod，它应该可以工作了！

【讨论】：

【解决方案3】：

你必须使用以下命令升级 laravel mix

npm install laravel-mix@latest

【讨论】：

在我的情况下修复了这个 pb (Laravel 8)