Does not load css on npm build

ahoiroman commented 1 year ago

Version

- Operating System: `Darwin`
- Node Version:     `v20.3.0`
- Nuxt Version:     `3.6.1`
- Nitro Version:    `2.5.2`
- Package Manager:  `npm@9.6.7`
- Builder:          `vite`
- User Config:      `devtools`, `modules`, `routeRules`, `i18n`, `content`, `googleFonts`
- Runtime Modules:  `@nuxthq/ui@2.5.0`, `@nuxt/content@2.7.0`, `@nuxtjs/i18n@8.0.0-beta.12`, `@nuxtjs/google-fonts@3.0.1`
- Build Modules:    `-`

Steps to reproduce:

nuxt.config.ts

export default defineNuxtConfig({
    devtools: {enabled: true},
    modules: ['@nuxthq/ui', '@nuxt/content', '@nuxtjs/i18n', '@nuxtjs/google-fonts'],
    // @ts-ignore
    routeRules: {
        '/api/v1/**': {
            proxy: 'http://test.test/api/v1/**',
        },
    },
    i18n: {
        experimental: {
            jsTsFormatResource: true
        },
        strategy: 'prefix_except_default',
        lazy: true,
        defaultLocale: 'en-US',
        langDir: 'locales',
        locales: [
            {
                code: 'en-US',
                iso: 'en-US',
                name: 'English',
                file: 'en-US.ts'
            },
        ],
    },
    content: {
        api: {
            baseURL: '/capi/_c'
        },
        defaultLocale: 'en',
    },
    googleFonts: {
        download: true,
        preload: true,
        display: 'auto',
        families: {
            Lato: [100, 300, 500],
            'IBM Plex Mono': [100, 300, 500],
        },
    },
})

tailwind.config.ts

import type {Config} from 'tailwindcss'

export default <Partial<Config>>{
    content: [
        `./components/**/*.{vue,js,ts}`,
        `./layouts/**/*.vue`,
        `./pages/**/*.vue`,
        `./content/**/*.md`,
        `./composables/**/*.{js,ts}`
    ],
    theme: {
        extend: {
            fontFamily: {
                body: ['Lato', 'sans-serif'],
                sans: ['Lato', 'sans-serif'],
                mono: ['IBM Plex Mono', 'monospace'],
            },
        },
    },
    plugins: [
        require('@tailwindcss/forms'),
    ],
}

What is Expected?

Styles being loaded

What is actually happening?

Running site using npm run dev works fine, but using npm run build and start it over, all styles are missing. No css file is being loaded at all.

ahoiroman commented 1 year ago

I found out that this happens, if @nuxtjs/i18n is installed.

benjamincanac commented 1 year ago

Would you mind providing a reproduction link using our StackBlitz playground? https://stackblitz.com/edit/nuxtlabs-ui?file=app.config.ts,app.vue

erikuit commented 1 year ago

Sounds like it could be related to this issue: https://github.com/nuxt/nuxt/issues/21840 In which case it should be fixed in nuxt-edge and the upcoming patch release of Nuxt. There's also a workaround available in that thread.

ahoiroman commented 1 year ago

Sure:

https://stackblitz.com/edit/nuxtlabs-ui-lvrhcx?file=nuxt.config.ts,package.json,package-lock.json,locales%2Fen-US.ts

Run in dev mode and in production mode and check the difference:

Bildschirmfoto 2023-07-04 um 11 34 02@2x