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

Posted

技术标签:

【中文标题】Tailwind CSS Laravel Mix 错误 - 强制安装 PostCSS 8【英文标题】:Tailwind CSS Laravel Mix Error - Forces PostCSS 8 to be installed 【发布时间】: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 插件并重试,但仍然无法正常工作。

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

【问题讨论】:

【参考方案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)

以上是关于Tailwind CSS Laravel Mix 错误 - 强制安装 PostCSS 8的主要内容,如果未能解决你的问题,请参考以下文章

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

laravel mix --production 不能正确生成tailwind css文件

在 Docker 容器中使用 Laravel Mix 构建完整的 Tailwind 3 app.css 文件

尝试使用 Laravel Mix 将 Tailwind CSS 添加到 Wordpress 项目时出现“未找到模块”

javascript 使用Purgecss与Tailwind和Laravel Mix

使用 Laravel Mix 和 Tailwind 编译 SASS 时出现问题