设置 Tailwind CSS v3 后的 Nuxt“npm run dev”构建循环答案

【问题标题】：Nuxt "npm run dev" build loop after setting up Tailwind CSS v3设置 Tailwind CSS v3 后的 Nuxt“npm run dev”构建循环
【发布时间】：2022-01-14 21:22:46
【问题描述】：

我关注 these steps from the Tailwind docs 将 Tailwind CSS v3 添加到我的 Nuxt.js v2.15.8 项目中。现在，当我在运行npm run dev 的同时保存文件时，我陷入了重建循环。它继续成功构建，但随后声称刚刚更新了一些随机数，因此它重新构建。我必须使用 Control + C 让它退出。

↻ Updated components/Comment.vue                                                                                                                21:08:59

✔ Client
  Compiled successfully in 1.86s

✔ Server
  Compiled successfully in 1.49s

↻ Updated 1642194543006  

✔ Client
  Compiled successfully in 1.14s

✔ Server
  Compiled successfully in 1.62s 

↻ Updated 1642194545447

✔ Client
  Compiled successfully in 1.13s

✔ Server
  Compiled successfully in 947.08ms

↻ Updated 1642194547991

...

有谁知道这可能是什么原因造成的？我添加到“nuxt.config.js”的唯一两件事如下，直接来自 Tailwind CSS 文档。

// nuxt.config.js

buildModules: [
  // ...
  '@nuxt/postcss8',
],
// ...
build: {
  // ...
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
}

// tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  theme: {
    screens: {
      xxs: '360px',
      xs: '480px',
      ...defaultTheme.screens,
    },
    extend: {
      colors: {
        'blue-100': '#8ac7f9',
        'blue-150': '#72bbf7',
        'blue-200': '#5bb0f6',
        'blue-300': '#43a5f5',
        'blue-400': '#2c99f3',
        'blue-500': '#148ef2',
        'blue-600': '#1280da',
        'blue-700': '#1072c2',
        'blue-800': '#0e63a9',
        'blue-900': '#0c5591',
      },
    },
  },
  plugins: [],
}

【问题讨论】：

顺风配置怎么样？你配置了吗？
@Danila 是的，它已配置。将其添加到原始问题的底部。
你安装了postcss@latest和autoprefixer@latest？ latest 可能是关键，因为 Nuxt 默认使用的不是最新版本。您也可以尝试移动插件或 buildModules，也许它应该是第一个或什么
我尝试删除所有内容，然后只安装“@nuxt/postcss8”，但我仍然看到问题，所以我认为它与@latest 无关。
@Wonderman 我没有解决问题，但我确实发现，Tailwind v3 与 Nuxt 中的 ESLint 模块冲突。你在使用 ESLint 模块吗？如果是这样，请尝试禁用它，它应该可以正确构建。目前，我只是通过 VS Code 使用 ESLint。不需要它作为内置构建工具。

标签： nuxt.js tailwind-css postcss

【解决方案1】：

问题出在下面一行：

module.exports = {
  content: [
    './nuxt.config.{js,ts}',
  ]
}

更改为（或仅保留您正在使用的那个）：

module.exports = {
  content: [
    './nuxt.config.js',
    './nuxt.config.ts'
  ]
}

来源/来源：https://github.com/nuxt-community/tailwindcss-module/issues/359#issuecomment-867956745

【讨论】：

你刚刚救了我的命！上个月我第一次尝试用多个依赖项更新整个项目，但实际上放弃了，因为我无法找到这个邪恶的无限构建循环的来源。今天又一次尝试，偶然发现这是顺风问题。你的答案是我谷歌搜索的第一个结果。多爱！
对我来说不起作用:(

【解决方案2】：

我已经通过以下步骤解决了这个问题：

移除nuxt/tailwind模块
Follow the instructions 在官方文档中使用 Nuxt 设置 Tailwind 3
检查 nuxt.config 中的 buildModules，删除 '@nuxtjs/eslint-module' 并添加 '@nuxt/postcss8'
纱线清洁
纱线安装

【讨论】：

这行得通，但解释和说明你的发现是有用的，而不是仅仅发布简单的步骤。 @nuxtjs/tailwind 和 @nuxtjs/eslint-module 之间似乎存在冲突。因为它是already stated in the comments，我认为我不需要@nuxtjs/eslint-module，所以我把它删除了。