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 项目时出现“未找到模块”