Vue尾风项目不会运行postcss错误

Posted 2023-03-06

【中文标题】Vue尾风项目不会运行postcss错误

【英文标题】：Vue tailwind project won't run postcss error

【发布时间】：2021-10-14 21:42:00

【问题描述】：

我正在尝试在我的笔记本电脑上运行我的项目，它适用于所有其他设备，具有相同的代码，但由于某种原因我无法在其上运行 tailwind，我收到以下错误

 in ./src/components/Adventures/Points.vue?vue&type=style&index=0&id=3e2b19af&scoped=true&lang=sass

Syntax Error: Error: Loading PostCSS Plugin failed: Object.fromEntries is not a function

(@/home/dawid/Desktop/Project/postcss.config.js)
    at Array.map (<anonymous>)


 @ ./node_modules/vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/stylePostLoader.js!

postcss.config.js

module.exports = 
  plugins: 
    tailwindcss: ,
    autoprefixer: ,
  ,
;

【问题讨论】：

您能分享一下您安装的 postcss 和 autoprefixer 版本吗？

@AtifZia "@tailwindcss/postcss7-compat": "^2.2.4", "autoprefixer": "^9.8.6", "postcss": "^7.0.36",跨度>

【参考方案1】：

最近在使用@vue/cli 安装带有Vue 3 脚手架的tailwindcss v3 时遇到了同样的问题，但是当使用Vite 时，通过tailwindcss framework guide 安装它时效果很好。

我尝试用@Ram 的this 回答来配置它。按照Tailwind CLI 的说明安装它，然后尝试在package.json 中编辑您的脚本，例如：

"scripts": 
    "tailwind": "npx tailwindcss -i ./src/assets/tailwind.css -o ./src/assets/output.css",
    "serve": "npm run tailwind && vue-cli-service serve",
    "build": "npm run tailwind && vue-cli-service build"
  ,

如果您想使用 tailwind CLI 工具中的--watch 来呈现每个更改，请使用不同的终端运行脚本。

"scripts": 
    "tailwind": "npx tailwindcss -i ./src/assets/tailwind.css -o ./src/assets/output.css --watch",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  ,

并且不要忘记在您的主视图中导入输出 css。

<style>
  @import "./assets/tailwind.css";
  @import "./assets/output.css";

  ...
</style>

【参考方案2】：

同样的错误。

package.json

"dependencies": 
  "@tailwindcss/postcss7-compat": "^2.0.2",
  "autoprefixer": "^9",
  "core-js": "^3.6.5",
  "postcss": "^7.0.36",
  "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
  "vue": "^2.6.11"
,

postcss.config.js

module.exports = 
  plugins: 
    tailwindcss: ,
    autoprefixer: ,
  ,
;

Component

<template>
  <div class="flex justify-center items-center text-sm">
    new component
  </div>
</template>

<script lang="ts">
  import Vue from "vue";

  export default Vue.extend(
    name: "NewComponent"
  );

</script>

<style scoped src="@/assets/tailwind.css">

</style>

错误：

ERROR  Failed to compile with 1 error2:40:19 PM

error  in ./src/assets/tailwind.css?vue&type=style&index=0&id=2312385a&scoped=true&lang=css&shadow

Syntax Error: Error: Loading PostCSS Plugin failed: Object.fromEntries is not a function

(@/home/vsts/work/1/s/postcss.config.js)
at Array.map (<anonymous>)


@ ./node_modules/vue-style-loader??ref--6-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--6-oneOf-1-2!./node_modules/postcss-loader/src??ref--6-oneOf-1-3!./src/assets/tailwind.css?vue&type=style&index=0&id=2312385a&scoped=true&lang=css&shadow 4:14-355
@ ./src/assets/tailwind.css?vue&type=style&index=0&id=2312385a&scoped=true&lang=css&shadow
@ ./src/components/NewComponent.vue?shadow
@ ./node_modules/@vue/cli-service/lib/commands/build/entry-wc.js

【讨论】：

我通过升级 npm 版本修复了它