Error: Loading PostCSS Plugin failed: Invalid or unexpected token (Vue.js, tailwind css)

Question

在一台新机器上从 github 克隆了我的存储库，为我的项目安装了所有依赖项，但抛出此错误并且不确定发生了什么或如何修复它。已尝试卸载所有节点模块并重新安装。按照建议将 postCSS 重新安装到版本 8。有什么想法吗？

错误

 ERROR  Failed to compile with 1 error                                                 17:43:02

 error  in ./src/index.css

Syntax Error: Error: Loading PostCSS Plugin failed: Invalid or unexpected token

(@/home/project/postcss.config.js)
    at Array.map (<anonymous>)


 @ ./src/index.css 4:14-157 15:3-20:5 16:22-165
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.0.23:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Answer 1

当我尝试将我的 Vue 应用程序部署到 Digital Ocean Droplet 时，我遇到了同样的错误。虽然我的应用程序正在构建并且运行在我的本地计算机上完美运行，但它无法在服务器计算机上运行。

然后我检查了我的 Node 版本，在我的本地机器上是 v14.17.1，但在我的服务器上不同的版本是运行ning（可能是 v10.0.1）。在我将服务器中的 Node 版本升级到 v14.17.1 后，我能够构建运行与我在本地机器上所做的完全一样。

所以我建议您检查一下Node版本是否相似，如果不相似则更新并重试。希望对你有用。

我也尝试卸载并重新安装所有依赖项，也重新安装了 PostCSS 8.0，但 none 它有效。只有在我使用相同的节点版本后，它才能在服务器中运行完美地运行，就像在我的本地机器上一样。

Answer 2

在我的例子中，eslint 自动格式化 postcss.config.js 并且它造成了这个错误。因此，请确保您的所有文件都与顺风设置中定义的相同。

Answer 3

我在运行 Node 10 时遇到了这个问题，并且也能够通过升级 Node 来修复它。对于遇到此问题的任何其他人，我强烈建议使用 NVM（节点版本管理器）包，这样，如果您拥有的其他项目依赖于旧版本的节点，您可以在它们之间快速切换。

https://tecadmin.net/how-to-install-nvm-on-ubuntu-20-04/

Error: Loading PostCSS Plugin failed: Invalid or unexpected token (Vue.js, tailwind css)

Error: Loading PostCSS Plugin failed: Invalid or unexpected token (Vue.js, tailwind css)

javascript

vue.js

postcss

tailwind-css