npm run prod 后的错误

Posted 2023-03-07

【中文标题】npm run prod 后的错误

【英文标题】：Errors after npm run prod

【发布时间】：2021-04-26 08:56:15

【问题描述】：

我正在使用 Laravel 和 Tailwind 在共享主机上开发一个小型网站。我可以在主机上使用命令行工具。在本地环境中，tailwind 可以正常工作，但在npm run prod 之后，大部分 Tailwind 功能都丢失了，app.css 和 app.js 似乎有错误。

例如悬停时缩放 -> transform hover:scale-105 duration-200 在主机上不起作用。

我尝试使用 cdn 导入 Tailwind，但这不是永久的解决方案。

我做错了什么？？ 我在没有运气的情况下寻找答案

【问题讨论】：

一个专业提示，我花了很长时间才学会......你不应该在生产服务器上运行 npm run * ......而是在本地运行，然后部署 .js 文件。一旦我读到生产服务器不应该有 node_modules 文件夹（不要问我为什么）

您运行的是哪个版本的 Tailwind？ 1.x 还是 2？

这是 Tailwind 2.x

【参考方案1】：

我假设您在本地运行 npm run dev 并在生产中运行 npm run prod。默认情况下，Tailwind 的开发版本不会删除未使用的样式规范。但是当使用npm run prod 时，未使用的样式是purged for production 使用。

正如您在文档中看到的那样，模板的路径应在您的 tailwind.config.js 的 purge 部分中配置。

module.exports = 
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  // .. more ..

See docs:

此列表应包括项目中按名称引用任何样式的所有文件

如果您不配置这些路径，Tailwind 不知道您使用的是哪个 classes，因此会清除它未找到的所有样式，f。前任。你的hover:scale-105。

解决方案“脏”：。 您在生产环境中运行 npm run dev，这将导致您的 css 构建较大，但现在解决了这个问题。

解决方案“干净”：。 您正确配置路径，让 Tailwind 正确识别它并清除未使用的样式......然后开心。

您也可以在您的开发环境中通过运行npm run prod 进行测试，看看会发生什么。

【参考方案2】：

npm run production 之后的 app.css 文件仍然有一些警告，当我将它上传到主机时，警告变成了错误。这是截图。

但是，当我在npm run dev 之后使用该文件时，一切正常。也许我在 Tailwind 类之间发生了冲突。我会想出一个答案。