Nuxt•4mo ago

css not applying on build mode

im having a little bad problem, can someone help me? it was working fine today in the morning. im using tailwind and @apply bg-color on body in css, works fine in dev mode, but in prod the background stays white. using vercel to host too. cant build and preview too body { @apply bg-gray-900; @apply text-white; } btw: Error 500 Cannot find module .output/server/node_modules/vue/server-renderer/index.mjs imported from /.output/server/chunks/routes/renderer.mjs when nuxt build and nuxt preview using: "dependencies": { "@nuxt/icon": "^1.4.5", "@nuxt/image": "^1.7.0", "@unocss/preset-rem-to-px": "^0.62.1", "animate.css": "^4.1.1", "nuxt": "^3.12.4", "vue": "latest", "vue-tippy": "^6.4.4" }, "packageManager": "[email protected]", "devDependencies": { "@unocss/nuxt": "^0.62.1", "dayjs-nuxt": "^2.1.9", "nuxt-aos": "^1.2.5" }

7 Replies

春 | HaruOP•4mo ago

tested on nyxt preview too, same thing bump

Cue•4mo ago

What does your nuxt.config look like?

春 | HaruOP•4mo ago

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },

  app: {
    pageTransition: {
      name: "fade",
      mode: "out-in",
    },
    layoutTransition: {
      name: "fade",
      mode: "out-in",
    },
    head: {
      title: "Pixelaria",
      titleTemplate: "%s - Pixelaria",
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        {
          hid: "description",
          name: "description",
          content:
            "Pixelaria: sua plataforma definitiva para explorar, interagir e aproveitar o melhor do mundo Habbo Hotel: Origins. Fique atualizado com as últimas notícias, eventos e dicas exclusivas.",
        },
      ],
      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
    },
  },

  modules: ["@unocss/nuxt", "dayjs-nuxt", "nuxt-aos", "@nuxt/icon", "@nuxt/image"],

  icon: {
    serverBundle: "remote",
  },

  css: [
    "~/assets/styles/app.css",
    "~/assets/styles/tooltip.css",
    "animate.css/animate.min.css",
  ],
});

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: "2024-04-03",
  devtools: { enabled: true },

  app: {
    pageTransition: {
      name: "fade",
      mode: "out-in",
    },
    layoutTransition: {
      name: "fade",
      mode: "out-in",
    },
    head: {
      title: "Pixelaria",
      titleTemplate: "%s - Pixelaria",
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        {
          hid: "description",
          name: "description",
          content:
            "Pixelaria: sua plataforma definitiva para explorar, interagir e aproveitar o melhor do mundo Habbo Hotel: Origins. Fique atualizado com as últimas notícias, eventos e dicas exclusivas.",
        },
      ],
      link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
    },
  },

  modules: ["@unocss/nuxt", "dayjs-nuxt", "nuxt-aos", "@nuxt/icon", "@nuxt/image"],

  icon: {
    serverBundle: "remote",
  },

  css: [
    "~/assets/styles/app.css",
    "~/assets/styles/tooltip.css",
    "animate.css/animate.min.css",
  ],
});

春 | HaruOP•4mo ago

https://stackblitz.com/edit/nuxt-starter-sg7cpj?file=assets%2Fstyles%2Fapp.css then npm run build && npm run preview

Haru

StackBlitz

Nuxt - Starter (forked) - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

春 | HaruOP•4mo ago

i did a little reproduce @cuebit as I said, it works fine on dev mode, but on build it simply doesnt D:

Cue•4mo ago

Ah, didn't notice you using @apply twice. Should only be used once.

body {
  @apply bg-gray-900 text-white;
}

body {
  @apply bg-gray-900 text-white;
}

春 | HaruOP•4mo ago

DAMN YOU'RE RIGHT D: let me test @cuebit IT WORKED THANKSSSSSSSS MUCH LOVE <3

Gaming

Programming

css not applying on build mode