Vue尾風項目不會運行postcss錯誤

Question

我正在嘗試在我的筆記本電腦上運行我的項目，它適用於所有其他設備，具有相同的代碼，但由於某種原因我無法在其上運行 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: {},
  },
};

Answer 1

最近在使用@vue/cli安裝帶有 Vue 3 腳手架的 tailwindcss v3 時遇到了同樣的問題，但是當使用 Vite 時，通過 tailwindcss框架指南安裝它時效果很好。

我試圖用@Ram 的這個答案來配置它。 按照說明使用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"
  },

如果您想使用--watch 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>

Answer 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