NuxtJS 3(Vue)中的新TailwindCSS实用程序类未热重载/pages目录

jpfvwuh4 于 2023-03-05 发布在其他

关注(0)|答案(1)|浏览(288)

我遇到了一个新的tailwindcss实用程序模块的问题，没有热重载，但只适用于我的/pages文件，而不是我的/components或/layout文件。当我最初运行npm run dev时使用的类可以正确加载，但如果我将类更改为以前没有使用过的类，它将无法加载（即：bg-red-400到bg-red-500）。tailwindcss导入包含在导入nuxt.config.ts的main.css文件中，即：

import { defineNuxtConfig } from "nuxt/config"; 
export default defineNuxtConfig({
  css: ["@/assets/css/main.css"],
})

我已经有了一个解决方案，它张贴在下面.

css

来源：https://stackoverflow.com/questions/75637249/new-tailwindcss-utility-classes-not-hot-reloading-pages-directory-in-nuxtjs-3

1条答案

按热度按时间

bakd9h0s1#

我不知道为什么会这样，但是从_app.vue中移除style标签就解决了这个问题。即使style标签包含了tailwindcss导入，热重新加载也不起作用。我在nuxt.config.ts中包含了css
nuxt.config.ts:

import { defineNuxtConfig } from "nuxt/config";

export default defineNuxtConfig({
  build: {
    postcss: {
      postcssOptions: {
        plugins: {
          "postcss-import": {},
          "tailwindcss/nesting": {},
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
  css: ["@/assets/css/main.css"],
  resolve: {
    alias: {
      fs: require.resolve("rollup-plugin-node-builtins"),
    },
  },
});

main.css包含tailwindcss导入
main.css:

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

顺便说一句，如果您的任何/pages文件包含一个样式标记，也会导致它们不能热加载。
我最初在reddit上看到了这个解决方案，但找不到堆栈溢出的解决方案，所以我希望这能帮助到一些人。https://www.reddit.com/r/tailwindcss/comments/p7h7yn/with_tailwindcss_nuxt_js_doesnt_autoreload_with/

赞(0）回复(0）举报 2023-03-05

我来回答

NuxtJS 3(Vue)中的新TailwindCSS实用程序类未热重载/pages目录

1条答案

相关问题

热门标签

最新问答