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

Question

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

\n

\xe2\x86\xbb Updated components/Comment.vue                                                                                                                21:08:59\n\n\xe2\x9c\x94 Client\n  Compiled successfully in 1.86s\n\n\xe2\x9c\x94 Server\n  Compiled successfully in 1.49s\n\n\xe2\x86\xbb Updated 1642194543006  \n\n\xe2\x9c\x94 Client\n  Compiled successfully in 1.14s\n\n\xe2\x9c\x94 Server\n  Compiled successfully in 1.62s \n\n\xe2\x86\xbb Updated 1642194545447\n\n\xe2\x9c\x94 Client\n  Compiled successfully in 1.13s\n\n\xe2\x9c\x94 Server\n  Compiled successfully in 947.08ms\n\n\xe2\x86\xbb Updated 1642194547991\n\n...\n

\n

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

\n

// nuxt.config.js\n\nbuildModules: [\n  // ...\n  \'@nuxt/postcss8\',\n],\n// ...\nbuild: {\n  // ...\n  postcss: {\n    plugins: {\n      tailwindcss: {},\n      autoprefixer: {},\n    },\n  },\n}\n

\n

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

\n

Answer 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